1.正常打包
聊一下vite打包上的优化，这里我们有一个vite工程，我们对它进行打包，打包完成后我们会发现，他的结果里面是把所有的东西全部合并到一个js里面。这个工程里面用到了vue、loadsh，像这些内容也会被合并到我们的打包结果里面去；
也就是说现在我们会遇到一个问题，就是我们打包出来的结果里面包含了loadsh、vue，还有我们自己的代码。
2.对象属性分包
你可能会问，这跟我有什么关系嘛？你可以想象得到，将来项目越来越大，变动比较大的是我们自己的业务代码，而这些第三方库，变动比较小，是相对比较稳定的；如果你不加处理的话，就意味着将来我们哪怕只改了我们自己的代码，整个打包出来的文件，它的文件指纹（就是 index- 后面这一块）会导致用户端每次更新必须要重新下载整个js
我们一般会怎么做呢？会把相对稳定的包给它踢出去，在打包结果里面，它们会形成独立的文件，这个文件可以是多个第三方库合并到一起的，也可以是单独的，这样一来由于你们比较稳定，所以里面的文件指纹也会相对比较稳定，不太容易发生变化；而将来这种不稳定的代码更新之后，用户只需要去下载业务代码就可以了，简称 **分包**。
在Vite里面有一个自动分包，使用动态导入 `import(‘loadsh’)` ，在Vite中，开发环境用的是esBuild，打包用的是rollup，想要影响打包结果，就得去vite里面配置rollup的选项，因为rollup里面是可以进行分包的，通过配置 manualChunks ，这个chunks 跟webpack的含义是一样的，块 就是一个 包，理清楚概念之后，就可以非常轻松的配置了；
在 vue.config.js 文件里面，使用build表示影响打包结果的配置，rollupOptios表示针对rollup的配置，剩下的里面就是吧rollup的配置给写进去就完事，使用 manulChunks，键表示包的名字，值表示包含那些模块；
npm run build 重新打包结果中出现了两个js文件，其中以`a-`开头的里面包含的内容就是loadsh和Vue;
将来我们修改了业务代码重新打包的时候，变的是自己业务代码的js文件，而以`a-`也是不会改变`a-`的，
3.函数分包
项目中用到的第三方库特别多怎么办？难道也打包成一个js文件嘛？显然不合理，如果其中一个库更新了，我能不能单独升级这个包？答案是可以的；
这样就完美了嘛？细心的小伙伴会发现，第三方包特别的情况，这样写下去，人都要麻了，那有没有更好的方案，有的！不把它配置为对象了，而是配置成函数 **manualChunks(id)** ，rollup在打包的时候，它会调用这个函数，把当前依赖模块的id传过来，我们可以打印id看一下有些啥！
打印结果里面主要包含 node_modules 和我们自己文件的路径，那我们能不能把 node_modules 合并成一个chunk 单独打包？
看下打包结果：
原文始发于微信公众号（前端领秀）：Vite 工程化 手动分包 了解一下
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/204404.html
