webpack项目的Vite迁移方案
2023-10-28 22:06:57
现在有很多项目都迁移到了Vite，但是Vite仍处于初期，因此存在一些问题，在实际应用中可能会遇到。本文通过技术博客的写作手段，以独特的观点展现事物，为基础构建文章，情感色彩丰富，词汇表达精准，熟练掌握互联网语言，文章节奏把握恰到好处，有序构建文章框架，逻辑鲜明，连贯通顺，独特性和上下文关联，解决webpack项目的Vite迁移问题，使开发者在迁移时能够更加得心应手。
运行时/构建时工具与插件优化
这个步骤将解决运行时/构建时工具与插件可能带来的问题。
运行时工具及配置
Vite默认使用esbuild来转换代码，esbuild没有对运行时代码作任何tree-shaking。
如果项目使用了按需加载的方案，在构建运行时，esbuild会将整个项目的所有模块都打包到最终的输出文件中，而其中很多模块在运行时根本不会使用到，极大程度上影响了运行时的性能。
解决此问题的方案是引入rollup来作为运行时的构建工具，rollup支持tree-shaking。
// vite.config.js
export default {
build: {
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('node_modules')) {
return 'vendor';
}
},
},
},
},
};
在.browserslistrc文件中指定运行时的兼容浏览器。
# .browserslistrc
chrome >= 60
firefox >= 60
safari >= 10
edge >= 15
ios >= 10
android >= 8
构建时插件
webpack中的许多插件在Vite中都可以找到对应的替代方案，例如：
babel-plugin-import: Vite中提供了@vitejs/plugin-babel插件，它可以自动将ES模块转换为CommonJS模块。webpack-merge: Vite中提供了vite-plugin-merge-styles插件，它可以将多个CSS文件合并为一个文件。clean-webpack-plugin: Vite中提供了vite-plugin-clean插件，它可以清除构建目录中的旧文件。
解决依赖漏加载问题
在实际开发中，我们会使用到各种各样的npm包，有些依赖可能并未在当前页面使用到，但是它可能会被其他页面引用。
如果漏加载了依赖，可能会导致页面出现错误，所以解决这个问题非常重要。
原因分析
问题原因在于Vite在构建时只解析了当前页面的依赖，而没有解析其他页面引用的依赖。
解决方法
这个问题可以通过使用import.meta.globEager函数来解决，该函数可以预加载所有匹配的文件，这样即使它们在当前页面中没有使用，也不会出现漏加载的情况。
const icons = import.meta.globEager('../../assets/icons/*.svg');
for (const key in icons) {
console.log(key, icons[key]);
}
结语
webpack项目的Vite迁移工作是一项复杂且具有挑战性的任务，但通过合理地规划和执行，是可以顺利完成的。
本文从前情回顾与目的了解出发，介绍了运行与构建时工具与插件的优化方案，并给出了解决困扰很多人的依赖漏加载问题的方法，希望能够为读者提供一个存/增量项目接入Vite的点子，起抛砖引玉的作用，减少这方面能力的建设成本。
Vite是一个仍在快速发展的工具，相信在不久的将来，它将变得更加成熟和稳定。届时，会有更多的项目迁移到Vite，并从中受益。
