小程序分包优化实践：解决主包过大和vendor.js体积问题
随着 uniapp 开发的小程序功能越来越复杂，主包的大小也逐渐增长，导致上传代码时遇到了2MB的限制。同时，由于微信小程序tabbar页面必须放在主包中，这进一步增加了主包的负担。为了提高用户体验并遵守平台规则，我们有必要采取一系列措施来优化小程序的打包结构，确保其符合性能和体积的要求。
小程序分包机制 (SubPackages)
小程序分包是一种将应用拆分为多个小部分的技术，它允许开发者将应用的不同部分独立打包，从而减少初次加载时间。通过合理配置 pages.json 文件中的subPackages字段，可以指定哪些页面属于分包，并且只在需要的时候才进行加载。这样不仅有助于控制主包的大小，还能加快非首屏页面的加载速度。
因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。上传代码时，主包必须在2M以内。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。
- Uniapp 官网介绍：https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages
- pages.json 页面配置
{
"pages": [
// 主包页面路径
],
"subpackages": [
{
"root": "subpackagePath", // 分包根目录
"pages": [
// 分包内页面路径
]
}
]
}
- manifest.json 中小程序配置
"optimization": {
"subPackages": true
},
依赖分析
在优化过程中，了解项目构建输出的具体情况是非常重要的。通过依赖分析工具开发者可视化打包后的输出文件结构，可以看到各个模块的大小、依赖关系等信息，这对于诊断性能瓶颈、减少包体积以及优化加载时间非常有帮助。
- 通过微信开发者工具进行依赖分析，及分包大小查看。
- 通过
rollup-plugin-visualizer插件查看 vendor.js 依赖
- 安装:
npm install rollup-plugin-visualizer --save-dev
- 配置示例:
import visualizer from 'rollup-plugin-visualizer';
build: {
rollupOptions: {
plugins: [
visualizer({
filename: './dist/stats.html', // 定义输出文件位置
open: true, //自动打开浏览器查看
}),
],
},
},
主包大小优化方案
- 资源外部化: 对于图片、图标等静态资源，考虑将其上传至 OSS 服务。还可以利用在线工具如TinyPNG进行压缩处理，以减小文件尺寸。
- 减少第三方库依赖: 检查项目中使用的第三方库，尽量选择轻量级版本，如 lodash、qs、dayjs。
- 依赖分包：把 node_modules 中的单独依赖放到对应子包中，如 gesti。避免所有页面都加载不必要的代码。
- 样式表瘦身: 在
uni.scss或App.vue中导入全局样式时，要谨慎选择必要的样式规则，去除不再使用的样式定义，尤其是批量生成或来自大型UI框架的样式文件。 - 组件库精简: 如果同时依赖了多个组件库，建议保留一个主要的UI框架或优先使用其中一个，以减少重复代码的引入。
- 特定组件优化：如 uCharts 等，可修改其源码仅保留需要的功能。
结语
通过对小程序分包策略的理解和实际操作，结合有效的依赖分析工具以及针对性的优化措施，我们可以显著降低主包的体积，改善应用的整体性能。希望上述方法能够给正在面临类似挑战的开发者带来启发，并助力创建更加高效的小程序体验。