项目背景
这是一个拥有5年+历史的移动端web项目，打包工具用的是webpack，但随着项目的不断迭代和更新，代码模块越来越多，导致编译和热更新速度极其缓慢，项目冷启动到页面完全渲染到浏览器上耗时15s+，热更新也10s+，当然随着项目代码量还在增加，那么耗时也在同步增长。如果你是个有追求的程序员，一定无法忍受这种处境，要对糟糕的东西说不，相信自己能改变些什么！
目标
- 编译和热更新速度要快，极快，进而提升开发效率和体验
- 不破坏项目功能，保证稳定和安全
解决方案
把webpack更换为vite，webpack沉淀了多年，功能强大，但缺点很明显，它会打包整个应用，导致编译速度慢，随着项目增大，速度也在同步递减，其底层打包原理导致，无论如何优化，速度方面提升也不会太大。优化webpack本身这条路是走不通的，只能去寻找新的道路，新的技术。那就是vite，利用浏览器module功能，实现按需构建，只编译相应的模块，而不是整个应用，所以带来闪电般的启动和热更新速度，还有许多开箱即用，配置简单等优点，让社区的开发者纷纷抛弃webpack，转入vite的怀抱。
行动
梳理webpack的配置
每个webpack项目都有它的webpack.config.js 配置文件，首先把自己的项目的环境弄清楚，比如：
- 项目会根据环境（测试或生产）的不同，来使用不同的参数。
- 路径别名
- 独有的项目配置，图片转换、样式转换等
切换到vite
- 先理解vite的基础，配置
- 安装vite，添加vite的配置文件
- 根据项目历史webpack的配置，用vite的方式来配置config文件
- 以下是我的部分配置，把webpack更换为vite的过程中，出现了200+个错误，但都一一解决了，这个过程历经了恐惧，放弃然后重来，多次尝试最终才得以成功。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import px2vw from 'postcss-px-to-viewport';
import path from 'path';
import { createHtmlPlugin } from 'vite-plugin-html';
export default defineConfig(({ mode }) => {
return {
build: {
assetsInlineLimit: 10000,
},
define: {
'process.env': {
ENV: mode,
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'win'),
},
},
css: {
postcss: {
plugins: [
px2vw({
viewportWidth: 750,
viewportUnit: 'vw',
}),
],
},
modules: {
localsConvention: 'camelCaseOnly',
generateScopedName: '[name]__[local]___[hash:base64:5]',
},
},
plugins: [
react(),
createHtmlPlugin({
entry: '/src/index.ts',
template: 'public/index.html',
inject: {
data: {
env: 'test',
},
},
}),
],
};
});
结局
项目编译和热更新实现毫秒级别的速度，非常感谢vite，给前端开发带来了更好的开发体验和效率，最后致敬webpack，作为上一代的产物，对前端的工程化发展做出了巨大贡献。
总结
首先要理解自身项目webpack的配置，以及vite的配置和双方的不同点，这是非常重要的，才能大大提高改造成功率和信心。毕竟多年的老项目就像拥有疾病的老人，关键是这位老人拥有的是多种疾病，而不是一种，这也大大增加了治疗的复杂度，我们必须像一位经验丰富，睿智的医生一样，对项目望闻问切，深入的理解它，才能全面精准解决问题。
