解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题
打包项目过程中遇到警告 (想看结果，可以滑至底部)
输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk)
Some chunks are larger than 500kb after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: rollup.js
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
由于打包有些依赖包体积过于庞大，提示你进行配置分割；
如何进行配置分割
根据提示进入到rollup.js
打开后你会看到一堆英文，还有两个小小的代码块
manualChunks: {
lodash: ['lodash']
}
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
}你可以看到 output.manualChunks 这个应该是放在rollup打包配置里面的
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks: {
lodash: ['lodash']
}
}
}
}
}再次运行打包你会发现 在你打包结果的中会有多了一个lodash，但是少了之前的vendor的大文件，其他的文件又变大了
输出文件名字/static/lodash.fe9934f4.js 0.23kb / brotli: 0.12kb
然后你在换个另外一个返回 return "vendor" 好像除了变大了其他的没什么变化，换个返回值试试
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return "wq";
}
}
}
}
}
}打包的结果如下，发现好像多了一个css,大小没有是什么改变,还变大了
打印一下这个id看看是什么玩意，猜测应该是一些依赖包，因为是看有没有node_modules
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
console.log(id,"======")
return "wq";
}
}
}
}
}
}
发现都是一些依赖包，既然是可以打印那我是不是可以返回对于的包的名字，开干
/node_modules/element-plus/lib/index.esm.js
我们直接以"node_modules/"进行分割 取第二个
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
console.log(id.toString().split('node_modules/')[1])
return "aa";
}
}
}
}
}
}
然后在以"/"进行切割取第一个 console.log("值为",id.toString().split('node_modules/')[1].split('/')[0].toString())
最好我们就以分割的值为返回的值就可以了 就不会报警告包体积太大了，而且他会把重复的放在同一个名字下不会有重复
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
}
重点在最后：这个文件太大其实不是这样去处理，这是只是视觉上的减小，其实他只不过是把大文件拆开来分成很多分了而已， 没什么实质性的作用，只是当时我在使用时遇到情况，才去进行处理，如果大佬想要知道怎么处理，可以看一下这篇文章 点击这里，这是我一位大佬进行交流把文件进行压缩的方法，使得网站访问速度大大提高
补充：会生成大量1kb的文件，反而文件数量多了不少，如何将所有小文件打包一起？
在之前把文件拆分虽然体积减小了但是文件数量增多了，既然rollup可以把文件整合，我们把文件拆分，那么我们就可以把单独体积大的文件拿出来，其余的文件整合，这样就可以把那些很小的文件和一起，由于我目前没有找到可以获取每个包文件的大小，只能通过先拆分打包后可以看到具体哪几个包体积大，然后把这几个包单独拿出来处理；当然这样的方法肯定不行，我只提供思路，如果哪位大佬知道如果获取文件的大小，可以评论告诉我，谢谢大佬门了
manualChunks(id) {
if (id.includes('node_modules')) {
//我这里用到其他包不多，最大的就是element-plus我把它单独拿出来，其余的都返回随便一个名字，
// 和之前没有配置相比，文件就只会多了element-plus和一个wq的js
if(id.toString().split('node_modules/')[1].split('/')[0].includes('element-plus')){
return 'element-plus'
}else{
return 'wq'
}
// return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}到此这篇关于解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题的文章就介绍到这了,更多相关vite1.0升级到2.0内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue项目如何全局修改el-button样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
解决打包后出现错误y.a.addRoute is not a function的
这篇文章主要介绍了解决打包后出现y.a.addRoute is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案
我自己使用addRoutes动态添加的路由页面,使用router-link标签可以跳转,但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面,这说明没有找到指定路由才跳到404路由的,这样的情况如何处理呢,下面小编给大家分享解决方案,一起看看吧2023-10-10
这篇文章主要为大家详细介绍了Vue小组件BootPage实现简单的分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要给大家介绍了关于Vue.js的复用组件开发流程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了vscode vue 文件模板的配置方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要给大家介绍了基于Vue3创建一个简单的倒计时组件的代码示例,文中通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2023-11-11
今天小编就为大家分享一篇vue 实现在函数中触发路由跳转的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
AntV 组织图操作完毕以后，需要点击按钮将画布以图片的形式导出，这篇文章主要介绍了AntV结合Vue实现导出图片功能,需要的朋友可以参考下2023-01-01
这篇文章主要为大家介绍了vue开发table数据合并实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论