前端项目打包优化手段之一:拆包分包，最合理的实践技术方案

打包优化，拆包分包。

关于打包优化，是不是包拆得越细越好呢？

在 View 文件夹下有众多模块，像用户的实图包含编辑、详情，还有权限这块都单独打成一个文件。

实际上在这里面配置不同的创客，在控制台执行 npm run build 时，这里面都是打包后的产物。这么多模块生成了许多 js，这里生成的 js 是按照这里的 import 按需引入来操作的。

这里的别名只针对 webpack 不生效，若想让别名生效，必须在 vite.config.jts 配置文件里去做别名和处理。比如把与 Voe route 相关的单独提成一个，与 Vue 相关的又单独提成一个，还有用户的编辑以及其他模块，包括 auth 模块也是如此。

打完包后的产物，文件被拆分成很多细小的文件，有些文件甚至不到 1kb。真的有必要拆得这么细吗？因为拆这么细会浪费一次带宽。

所以有时候要根据自身业务情况进行合并，比如把这三个文件合并到一个文件里，也就是合并到 group-user 里面。

有时候在打包优化，特别是优化首屏时会做这样的引入，有些 js 没必要一开始就加载，要根据业务情况决定哪些 gs 合并，哪些 gs 不合并，不同项目和不同需求情况是不一样的。

所以这种优化方式不是万能的，要根据业务进行优化。当然这里还可以进一步处理，比如有些 js 是否可以加 prefetch，有些 js 是否可以加 preload，这些都是优化手段，不同项目不同业务的优化方式是不同的。

如果大家有什么好的方案，可以在评论区留言。