返回

分享我从Vue CLI 3迁移到Vite 2的经历，性能提升几十倍

前端

前言

Vite 2是一个由Vue团队开发的构建工具，它使用原生ESM导入系统来构建前端应用程序，无需打包步骤，开发环境启动和热更新速度非常快。相较之下，Vue CLI 3使用webpack作为构建工具，虽然功能强大，但启动和热更新速度较慢。

迁移过程

1. 安装Vite

首先，需要在项目中安装Vite：

npm install -D vite

2. 创建Vite配置文件

在项目根目录下创建vite.config.js文件，并添加以下内容：

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

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

3. 修改入口文件

将项目的入口文件（通常是main.js或index.js）修改为使用Vite的API：

import { createApp } from 'vue'
import App from './App.vue'

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

4. 修改HTML文件

修改项目的HTML文件，将<script>标签中的src属性指向Vite的开发服务器：

<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/main.js"></script>

5. 运行Vite

在项目根目录下运行以下命令启动Vite：

npm run dev

效果对比

迁移到Vite 2后，项目的开发环境启动速度从原来的十几秒缩短到了几秒，热更新速度也从原来的几秒缩短到了几百毫秒。性能提升非常显著。

总结

通过将一个使用了6年的老项目从Vue CLI 3迁移到Vite 2，我成功地解决了开发环境启动、打包编译和热更新速度慢的痛点，性能提升非常显著。如果您也有一个需要优化的老项目，不妨尝试一下迁移到Vite 2。

附加信息

注意事项

在迁移过程中，可能会遇到一些问题，例如：

  • 某些依赖项与Vite 2不兼容
  • 需要修改一些代码才能在Vite 2中正常运行

在遇到这些问题时，可以参考Vite 2的文档或社区论坛寻求帮助。

更多资源