小程序分包优化实践：解决主包过大和vendor.js体积问题

小程序分包优化实践：解决主包过大和vendor.js体积问题

引用

CSDN

1.

https://m.blog.csdn.net/LifeRiver/article/details/144831941

随着uniapp开发的小程序功能越来越复杂，主包的大小也逐渐增长，导致上传代码时遇到了2MB的限制。同时，由于微信小程序tabbar页面必须放在主包中，这进一步增加了主包的负担。为了提高用户体验并遵守平台规则，我们有必要采取一系列措施来优化小程序的打包结构，确保其符合性能和体积的要求。

小程序分包机制 (SubPackages)

小程序分包是一种将应用拆分为多个小部分的技术，它允许开发者将应用的不同部分独立打包，从而减少初次加载时间。通过合理配置 pages.json 文件中的 subPackages 字段，可以指定哪些页面属于分包，并且只在需要的时候才进行加载。这样不仅有助于控制主包的大小，还能加快非首屏页面的加载速度。

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。上传代码时，主包必须在2M以内。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据 pages.json 的配置进行划分。

pages.json 页面配置

{
  "pages": [
    // 主包页面路径
  ],
  "subpackages": [
    {
      "root": "subpackagePath", // 分包根目录
      "pages": [
        // 分包内页面路径
      ]
    }
  ]
}

manifest.json 中小程序配置

"optimization": {
  "subPackages": true
},

依赖分析

在优化过程中，了解项目构建输出的具体情况是非常重要的。通过依赖分析工具开发者可视化打包后的输出文件结构，可以看到各个模块的大小、依赖关系等信息，这对于诊断性能瓶颈、减少包体积以及优化加载时间非常有帮助。

1. 通过微信开发者工具进行依赖分析，及分包大小查看。
2. 通过 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, //自动打开浏览器查看
        }),
    ],
    },
},

主包大小优化方案

1. 资源外部化: 对于图片、图标等静态资源，考虑将其上传至 OSS 服务。还可以利用在线工具如TinyPNG进行压缩处理，以减小文件尺寸。
2. 减少第三方库依赖: 检查项目中使用的第三方库，尽量选择轻量级版本，如 lodash、qs、dayjs。
3. 依赖分包：把 node_modules 中的单独依赖放到对应子包中，如 gesti。避免所有页面都加载不必要的代码。
4. 样式表瘦身: 在 uni.scss 或 App.vue 中导入全局样式时，要谨慎选择必要的样式规则，去除不再使用的样式定义，尤其是批量生成或来自大型UI框架的样式文件。
5. 组件库精简: 如果同时依赖了多个组件库，建议保留一个主要的UI框架或优先使用其中一个，以减少重复代码的引入。
6. 特定组件优化：如 uCharts 等，可修改其源码仅保留需要的功能。

结语

通过对小程序分包策略的理解和实际操作，结合有效的依赖分析工具以及针对性的优化措施，我们可以显著降低主包的体积，改善应用的整体性能。希望上述方法能够给正在面临类似挑战的开发者带来启发，并助力创建更加高效的小程序体验。