背景与现象
- 将一个当前只有简单功能的H5项目(通过vue-cli 3+创建) 迁移为uni-app项目,需要支持输出为QQ小程序、H5。在QQ小程序开发者工具中,发现无法生成预览和真机调试,原因是代码包超过2M,经过分析,发现编译后代码中,最大的是:
common/vendor.js
,一些处理后仍有2.5M。打包生产版本分析,也是同样的问题。 - 项目通过vue-cli命令行创建,因此以下涉及示例的,都以此为准,使用HBuilderX开发的,麻烦自行转换操作。
解决方法
- 开启运行时压缩
这个方法测试了,没看出有什么帮助。
- 分包优化
这个方法更多地是对于页面过多或static图片资源过多的情况有用。此项目也进行了分包,但这个并未解决打包后vendor过大的问题。
以上2个方法,为uni官方建议的处理vendor过大的方法,见文档-介绍-uni-app 跨端开发注意事项-vendor过大的处理方式
- Bug:分包资源被打包到主包而导致的vendor过大
这个问题没有遇到,看起来是曾经版本出现过,但新版本已修复,若是这个问题导致的,则可参考:issue #649,question #72577
- 其他的一些处理方式
看到的一篇文章,虽然我的项目中不是这些原因,但这些方法是需要考虑的:小程序包大小优化(uni-app)
- 开启生产环境gzip,vendor.js从2.5M减少到440k
如何开启,使用compression-webpack-plugin
vue.config.js:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
threshold: 10240,//对10K以上的数据进行压缩
minRatio: 0.8,
deleteOriginalAssets:false,//是否删除源文件
})
]}
}
文件分析
使用 webpackBundleAnalyzer,可以帮助分析文件大小。
vue.config.js:
pluginOptions: {
webpackBundleAnalyzer: {
openAnalyzer: process.env.NODE_ENV === 'production'
}
},
编译后,会同时带一份报告,可查看 stat, parsed, gzip 三种状态的文件大小。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。