小程序打包是开发流程中的关键环节，很多人以为把代码往平台一提交就完事了，其实这里面的门道还挺多的。我之前做VUE项目的时候，也踩过不少坑。比如第一次打包小程序时，代码体积直接超标，提交审核被退回，那叫一个崩溃。后来才明白，原来是有很多技巧可以优化的。### 资源文件要精简
图片和静态资源往往是体积超标的最大元凶。我的经验是，能用CSS实现的效果就坚决不用图片，非要用图片的话一定要压缩，可以用TinyPNG这类在线工具批量处理。另外，现在很多小程序平台都支持WebP格式，同等画质下体积能小将近一半，何乐而不为呢？
还有一点容易被忽略，就是按需加载。很多新手把所有图片都一股脑打包进去，结果包体积动辄好几兆。其实完全可以把首屏不需要的资源放到CDN上，用户用到的时候再加载，体验其实差不多，但包体积能降下来很多。
代码层面要下功夫
JavaScript代码也要注意优化。首先，production环境一定要把console.log和debugger这些调试代码删掉，很多人忘了这茬，一打包就是一堆无用代码。其次，第三方库能按需引入就按需引入，别把整个库都塞进去。比如你只需要lodash的某个函数，就只引入那一个，别import整个库。
我习惯用webpack的splitChunks来拆分代码，把公共依赖和业务代码分开。这样用户首次加载的体积能小很多，加载速度自然就上去了。
构建配置有讲究
vue.config.js里其实有很多可以优化的地方。比如把productionSourceMap设为false，就能关闭源代码映射，不仅能减小包体积，还能保护源码不被轻易看到。另外，如果发现chunk-vendors.js太大，可以考虑把大体积的第三方库单独打包，或者换成更轻量的替代方案。
还有一个小技巧，就是开启代码压缩和混淆。现在构建工具默认都会做这件事，但参数可以自己调。terser之类的工具配置得当的话，还能再压缩个百分之十左右。
测试验证不能少
打包完成后一定要仔细测试。我通常会检查这几个方面：包体积有没有超过平台限制、各个页面功能是否正常、在真机上的表现如何、网络不好时的加载情况等等。别忘了测试不同机型，有些兼容性问题只有在特定机型上才会暴露。
最后提醒一点，版本管理要做好。每次打包前记录一下改动内容，方便后续回溯。我就见过有人改完代码打包上线，结果出问题了想回滚，却找不到之前的版本，那叫一个尴尬。
以上这些技巧看起来都不复杂，但真正能坚持做好的人不多。很多人嫌麻烦，觉得差不多就行，结果用户体验一直上不去。小程序打包这件事，还真是细节决定成败。
評論（10）
之前按需加载那步搞了好久，原来可以这么搞
terser压缩那部分参数咋调啊，试了几个版本效果一般
WebP格式确实香，之前还不知道这茬
splitChunks这个我之前也没用过，回头试试
console.log忘删那次被打回，简直社死
CDN那个靠谱吗，加载会不会变慢啊
lodash按需引入这个真的很多人忽略
TinyPNG那个工具用着还行
求问下这个在uni-app上也适用吗