MpVue打包vendor过大问题解决办法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MpVue打包vendor过大问题解决办法相关的知识,希望对你有一定的参考价值。
参考技术A webpack开发环境没进行UglifyJs压缩,所以解决的方法来了,引入UglifyJs插件修改build目录下 的webpack.dev.conf.js配置文件,前面添加插件的引入,
在插件列表最后加上一句话,即可完美解决
原文链接: https://blog.csdn.net/julywind1/article/details/92786236
通过测试,这个方法确实压缩了vendor的大小,但是可能会导致某些功能不可用,比如我的压缩后云信功能受了影响,所以具体用的时候大家需要慎重;如果这个方法不可以,建议用下面第二种方法
mpvue 打包的小程序会自动将重复引用打包到 static -> js -> vendor , 当引用的第三方库过多时, vendor 就会超出 500K ,小程序开发者工具有 500k 限制,大于 500k 的包不进行转码和压缩,此时就可能导致预览失败,文件体积超过 2M 限制
1、减少不必要第三方库的使用,或采用精简版的库,满足功能即可
2、拆分 vendor ,使每个 js 文件体积小于 500K 开发者工具进行一次压缩就可能低于 2M 了
本篇文章主要描述如何采用第二种方法
修改为:
需要注意的是拆分顺序不能乱, vendor 拆出来的模块才会到 webim , 如果 vendor 对所有模块的返回值都是 false,则 webim 也为空,经过摸索,我的理解是 webim 是对 vendor 进行了再拆分,所以需要拆分的模块一定要先经过 vendor 的筛选。
经过以上配置, 你的 dist -> static -> js 下应该多了 webim.js ,说明已经拆分成功
此时试一下看是否能正常打包,我到这一步已经解决了我的问题,所以下面的两步就没做,如果你的没解决可以继续往下看
打包后的文件 dist -> pages 里的页面文件, .js 中默认引入以下模块
并没有刚才拆分出来的 webim 的引用,此时程序虽然打包成功,但是缺少模块无法运行
需要修改 node_modules 中 mpvue-loader -> lib -> mp-compiler -> templates.js
修改为:
注意:模板的引用顺序不能乱需要按照 webpack.dev.conf.js 中的配置从后往前引入 。
使用 resolveLoader.modules 配置,webpack 将会从这些目录中搜索这些 loaders。不添加配置默认会在 node_modules 中查找,添加配置之后,会按照配置逐级查询, 我的 mpvue-loader 就放在 src 下的 lib 中,详情可参考 webpack3.0之loader配置及编写
至此 vendor 的拆解工作完成, vendor 体积小于500K, 小程序开发者工具顺利完成打包工作。此方法治标不治本,最好的方法还是删库,删需求,小程序提倡简洁,如果功能太多,拆成两个小程序就好,肯德基的小程序就是这么做的。
使用vue-cli生成的vendor.js文件太大,有办法减少体积吗
参考技术A 对于这一点,正在写一篇文章,予以阐述的:详见这篇文章:http://jeffjade.com/2017/03/1... , 鉴于内容较多,还在写作过程中。以下为现编写的答案:(Update@17-08-24) | 对于这个问题,有写两篇文章,分别对体积和速度方面优化,予以探究,欢迎一起探讨;
Webpack 打包优化之体积篇
Webpack 打包优化之速度篇
首先,在写 Vue 的时候,应该采用懒加载模式,之后生成的包,就会被打入到不同分组的 js,运行时按需加载,详情见:Vue-路由懒加载;这个意义重大!
其次,可利用,webpack.DllReferencePlugin webpack.DllReferencePlugin 将常用不怎么变更的文件,打入一个统一的文件,外链使用。这个主要作用也可用来缩小包构建的时间;这个网上教程蛮多,就不赘述。也可参见这个项目 jade-blog 来配置;这一步即是你通过配置将部分库抽离出来,打包成另外的文件。
再次,可以利用 webpack-bundle-analyzer 可以分析打包后生成的文件结构,十分牛掰(最新 Vue-cli 带有此配置);在 package.json 中配置如下命令 npm run analyz,运行即可查看之:
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
对此可以分析研究,采取办法过滤掉重复的内容等... ... 其他还有诸如开启压缩啦,开启 Gzip 之类等等,来减小包的体积。
赘言:当然也可以从另一个维度来精细解决,即代码角度。非必需库可以不与引用,比如已经退出历史舞台的 JQuery,还有 momont 等。再有就是合理的去写,比如组件复用,合乎时宜的去使用混合诸次等等。
容继续学习,继续更新;
以上是关于MpVue打包vendor过大问题解决办法的主要内容,如果未能解决你的问题,请参考以下文章
mpvue的自定义组件中运行$emit函数时输入框光标抖动的解决办法
使用vue-cli生成的vendor.js文件太大,有办法减少体积吗