体积优化指南
由于微信小程序限制主包体积为2M,较复杂的应用可能需要尽可能进行体积优化。
分包是微信小程序中优化包体积的核心手段(类似于异步按需加载),Mpx对其进行了完善的支持,可以精确地标记出分包only的资源。此外还可以从按需构建及分析构建结果等方面下手。
尽量让纯分包用的代码和主包用的代码分离(即让资源成为分包only的)
- 比如分包页面中需要使用一个叫 utilA 的体积很大的方法,主包页面中需要使用一个叫 utilB 的方法,如果你将这两个方法写在同一个 util.js 文件中,util模块最终会被打包到主bundle中,造成没必要的主包体积增大。更多参考
在json里做最小声明,mpx本身提供了按需打包的能力,但按需是指按用户的声明,无法做到根据一个page是否被使用来打包
- 比如分包单独开发再以npm包形式发布这种开发模式中,可能会出现npm包开发者方为了调试组件编写了多份page引用对应组件仅为调试方便,最终集成时就会让这些调试页面占用空间。可以另提供一份json文件和app.mpx同级,比如叫index.json,开发包时候以app.mpx为入口,集成时候以index.json为入口。
使用analysis工具分析体积大的原因
- 构建时加上
--report
参数,会生成构建图,即可查看整个项目的体积构成来源了,进而分析是哪些模块占据了体积。webpack生态,webpack-bundle-analyzer插件提供的。
- 构建时加上