小程序主包超出限制，

Question

小程序主包超出限制，但是看文件没几个敢动的啊，这个怎么解决？

Answer 1

引自免费微信小程序：皆我百晓生

小程序主包大小超出限制是一个常见的问题，微信小程序规定了主包的大小上限（例如，在2023年时是2MB，可能会随着微信小程序平台的更新而有所调整）。当您遇到主包体积过大的情况时，可以尝试以下策略来优化和减小主包尺寸：

1. 代码分割与懒加载：

   • 使用 Taro 或其他框架提供的动态导入功能，将非首屏或按需加载的组件、页面逻辑拆分到子包中。
   • 对于大型库，确保只引入必要的部分，避免一次性加载整个库。

2. 资源压缩与优化：

   • 通过配置 Webpack 或 Taro 的构建工具，对 JavaScript、CSS 和图片等资源进行压缩，去除不必要的注释、空白字符等。
   • 使用 Tree Shaking 技术移除未使用的模块和组件。
   • 图片资源尽量使用网络压缩服务或者转为 WebP 格式，并考虑使用雪碧图、SVG 等技术减少文件数量和大小。

3. 公共库提取：

   • 将第三方库如 React 等提取到一个单独的 chunk 中，以 common.js 为例，这样所有页面都可以共享这个公共模块，而不是每个页面都包含一份。

4. 样式优化：

   • 减少全局样式文件（如 app.wxss）中的冗余和重复样式。
   • 分离通用样式和特定页面样式，合理组织 wxss 文件结构。

5. 重构代码：

   • 检查是否有冗余代码，删除不再使用的函数、变量和组件。
   • 对于大体积的 JS 文件，分析是否可以进一步拆分成多个模块或减少其中的业务逻辑。

6. 静态资源托管：

   • 将部分静态资源（如图片、音频、视频等）上传至云存储服务，然后在小程序中通过网络请求加载，不计入主包大小。

根据你给出的具体文件列表，你可以重点查看 vendors.js 这样的大型文件，看看是否可以通过上述方式将其拆分或减少其内容。同时，对于一些较大的独立组件或页面，也可以考虑是否能实现异步加载。