打包项目过程中遇到警告 (想看结果，可以滑至底部)

输出文件名字/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的jsif(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问题如何解决相关推荐

记selenium1.0升级到selenium2.0
前阵子因为要进行支持多浏览器的自动化测试,原来selenium1.0仅支持到firefox3.6,IE8,chrome4的版本,而公司GA数据显示用户多使用IE9,Firefox20,chrome26 ...
Spring Boot 从1.0 升级到 2.0 所踩的坑
先给大家晒一下云收藏的几个数据,作为一个 Spring Boot 的开源项目(https://github.com/cloudfavorites/favorites-web)目前在 Github 上面 ...
初次Android 6.0升级Android 8.0的心酸总结
前置条件 1.需要先确定你要升级的Android版本(这里我是从6.0升级到8.0,也就是compileSdkVersion从23升级到26),无论是升级到什么版本,你的AS都至少需要升级到3.0以上 ...
WSS2.0升级到WSS3.0
WSS2.0升级到WSS3.0的过程: 1.检查服务器上面是否安装.Net Framework3.0(必须要安装的). 2.安装WSS3.0(安装后别做配置) 选择第一项(逐步升级),默认的是第二项( ...
Oracle10.2.0.1.0升级Oracle10.2.0.2.0补丁安装指南(转载)
Oracle10.2.0.1.0升级Oracle10.2.0.2.0补丁安装指南 Oracle数据库学习之路 2008-07-25 11:35:12 阅读5 评论0 字号:大中小一.安装数据库先安 ...
Finereport 9.0升级到10.0工具下载[9-10升级工具]
QQ192374926 1. 描述现提供一个独立的辅助升级程序,可以将 9.0 的 Web 工程升级到 10.0 工程,包括 JAR 包.各类配置文件.FineDB 数据表等的兼容升级. 注:支持 ...
Spring Boot 1.0 升级到 2.0 的时候遇到一些问题
将云收藏从 Spring Boot 1.0 升级到 2.0 的时候也遇到了一些问题,在修改的过程中记录下来,今天整理一下分享出来,方便后续升级的朋友少踩一些坑. 1.第一个问题:启动类报错 Sprin ...
web3.0 升级到webpack5.0 以及兼容IE处理
如果你的事vue-cli 或者其他cli 关于IE 兼容不具有什么参考价值.如果是react 项目,你看看就行. webpack3的打包速度已成为诟病,所以我们将原来的webpack3升级至webp ...
127.0.0.1 myz.php,附录 – 1.0升级到2.0注意事项 - GatewayWorker 2.x 3.x 手册
如何知道自己使用的版本是1.0还是2.0 打开文件 GatewayWorker/Gateway.php,查看是否有常量VERSION,并且常量值大于等于2.0.0 class Gateway exte ...
华为android9.0升级,华为安卓9.0升级名单 EMUI9.0升级支持机型汇总
在新系统的适配以及照顾老机型的升级方面,华为堪称国产手机的标杆.在华为Mate 20系列率先首发EMUI 9.0之后,将有一大波老机型将开放新系统的升级. 日前,华为消费者业务CEO余承东在微博上确认 ...

项目vite1.0升级到2.0打包遇到Some chunks are larger问题如何解决

打包项目过程中遇到警告 (想看结果，可以滑至底部)

如何进行配置分割

总结：感谢各位看官，小生不才请多指教

项目vite1.0升级到2.0打包遇到Some chunks are larger问题如何解决相关推荐

最新文章

热门文章