Vue2+Webpack3项目无痛迁移Vite2实践分享

2023-09-25 13:22:55

在这个技术日新月异的时代，拥抱前沿技术栈是保持竞争力的关键。近日，我们公司的一个大型后台管理系统，因使用Vue2和Webpack3，导致开发热更新和打包构建速度极慢。为此，我们决定迁移到Vite2，以优化性能并提升开发体验。本文将分享我们迁移过程中的详细步骤、踩坑总结以及最佳实践，供广大前端工程师参考借鉴。

迁移准备

在正式迁移之前，我们需要做好充分的准备工作：

技术选型： 仔细评估Vite2是否适用于我们的项目，确保其功能和性能满足需求。
环境搭建： 安装Vite2 CLI并初始化项目，同时配置好相应的依赖项和开发工具。
代码审查： 对老项目代码进行全面的审查，识别潜在的兼容性问题和需要重构的模块。

迁移步骤

1. 转换Vue2代码

Vite2使用Vue3作为底层框架，因此需要将Vue2代码转换为Vue3。我们可以使用vue-demi库进行平滑过渡，它提供了Vue2和Vue3的兼容层。

// 使用 vue-demi 转换 Vue2 代码
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2. 替换Webpack构建

Vite2采用基于Rollup的构建系统，取代了Webpack。我们需要将Webpack配置文件迁移到Vite2的vite.config.js文件中。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

3. 引入Vite插件

Vite2提供了一系列开箱即用的插件，可以增强开发体验和优化构建性能。根据需要，我们可以引入必要的插件，例如eslint-plugin-vue、stylelint和vite-plugin-svg-icons等。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'eslint-plugin-vue'
import stylelint from 'stylelint'
import svgIcons from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin(),
    stylelint(),
    svgIcons()
  ]
})

4. 优化构建配置

Vite2提供了灵活的构建配置选项，我们可以根据项目需求进行定制。例如，我们可以优化CSS打包、代码分割和缓存策略，以提高加载速度和性能。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/styles/variables.scss";'
      }
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'vuex'],
          utils: ['lodash', 'dayjs']
        }
      }
    }
  }
})