Nevermind

从 Webpack 到 Vite：一次平滑的迁移之旅

4 min

1. 为什么要迁移？Webpack 的痛点

Webpack 是一个极其强大且可配置的模块打包工具，多年来一直是前端项目的基石。但随着项目规模的增长，其基于“打包”的核心思想也带来了性能瓶颈：

  • 缓慢的冷启动: 每次启动开发服务器 (dev-server)，Webpack 都需要遍历整个依赖图，将所有模块打包到内存中，这个过程在大型项目中可能会花费数分钟。
  • 缓慢的热更新 (HMR): 当你修改一个文件时，Webpack 需要重新计算相关模块并进行替换。虽然比整个页面刷新快，但在大型项目中，这个过程的延迟也可能达到数秒甚至十几秒，打断开发心流。

2. Vite 如何解决这些问题？

Vite (法语意为“快”) 另辟蹊径。它利用了现代浏览器对原生 ES 模块 (ESM) 的支持，将构建过程分成了两部分：

  • 开发时: Vite 启动一个服务器，它并不预先打包所有模块。相反，它会拦截浏览器的模块请求，按需转换和提供源码。例如，浏览器请求 main.js，Vite 提供它；main.js 导入了 Button.vue，浏览器再次发起请求，Vite 再次提供转换后的 Button.vue。这使得开发服务器的启动几乎是瞬时的。
  • 生产时: Vite 使用 Rollup（一个同样高效的打包工具）进行打包，以获得高度优化的静态资源。

这种模式彻底改变了开发体验，带来了闪电般的启动速度和毫秒级的热更新。

3. 迁移实战步骤

将一个现有的 Webpack 项目迁移到 Vite 通常涉及以下步骤：

a. 安装依赖并创建配置文件

首先，安装 Vite：

pnpm add -D vite @vitejs/plugin-react # 或 @vitejs/plugin-vue

然后在项目根目录创建 vite.config.js：

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

export default defineConfig({
  plugins: [react()],
})

b. 移动 index.html

Webpack 通常将 index.html 放在 public 目录下，并自动注入打包后的 JS。Vite 则将 index.html 视为应用的入口。你需要将它移动到项目根目录，并手动添加脚本引用：

<!-- /index.html -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

c. 替换 Webpack 插件

你需要找到 Webpack Loaders 和 Plugins 对应的 Vite 插件。社区生态非常丰富，大部分需求都能找到解决方案。

WebpackVite
babel-loader@vitejs/plugin-react (内置 Babel)
vue-loader@vitejs/plugin-vue
file-loaderVite 内置支持
webpack-dev-serverVite 内置开发服务器

d. 处理环境变量

在 Webpack 中，我们习惯使用 process.env.NODE_ENV。在 Vite 中，需要通过 import.meta.env 来访问环境变量。例如，import.meta.env.VITE_API_URL。

e. 配置路径别名

在 vite.config.js 中配置路径别名非常简单：

import path from 'node:path'
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

4. 迁移后的成果

迁移到 Vite 后，最直观的感受就是 快。

  • 开发服务器启动时间从 50秒 缩短到 2秒。
  • 热更新时间从 平均3-5秒 降低到 几乎无感的几十毫秒。
  • 配置文件 (vite.config.js) 相比 webpack.config.js 大大简化。

结论

虽然迁移过程可能需要处理一些项目特有的配置问题，但从 Webpack 迁移到 Vite 所带来的开发体验提升是巨大的。如果你还在忍受缓慢的构建过程，那么现在就是拥抱 Vite 的最佳时机。

Vite Webpack Build Tools Migration