TODO: Webpack 迁移至 Vite 过程中存在的问题

  1. 最大的问题还是一致性的问题。 Vite 线上环境是通过 Rollup 打包,与本地开发环境不一致,导致一些问题无法复现。

主要解决 Webpack 在大前端应用中,启动时间过长,热更新慢的问题。

结果

  1. 启动时间 250s 至 20s 左右
  2. 有组件热更新功能,hot module reload / page reload. 时间约 2s 左右。

过程

1. wp2vite

分析配置项,entry 之后的内容,生成 vite.config.js,做了一层 map 硬编码

2. 无法处理到的

例如 alias 手动设置

less 的全局变量无法直接识别,需要在 css 属性中传入。 modifyVars

global 全局变量的处理。 => vite 需要给它设置为空对象,或者直接挂在 window 上一个 global 对象。

3. 不一样的地方

  • 入口文件需要修改, type=module
  • plugins 书写方式
  • define 声明一个全亮
  • alias
  • 热更新: reactRefresh(),
  • 不支持 require。 如果使用了 require.context 一次导入多个文件 import.meta.globEager 的形式拿出来
  • less 不支持 ~@ 的形式
  • 环境变量 process.env.NODE_ENV 需要修改成 import.meta.env.DEV 这种形式
Last Updated:
Contributors: yiliang114