【taro react】---- 微信小程序 optimizeMainPackage 优化主包体积大小

1. 官方文档

mini.optimizeMainPackage ---- 优化主包的体积大小

2. 优化主包的体积大小

像下面这样简单配置之后，可以避免主包没有引入的 module 不被提取到commonChunks中，该功能会在打包时分析 module 和 chunk 的依赖关系，筛选出主包没有引用到的 module 把它提取到分包内，下面是提取的两种类型的分包公共模块：

2.1 分包根目录/sub-vendors.(js|wxss)

如果该 module 只被单个分包内的多个 page 引用，则提取到该分包根目录的 sub-vendors 文件中。

2.2 分包根目录/sub-common/*.(js|wxss)

如果该 module 被多个分包内的 page 引用，正常情况下会被提取到主包的公共模块中，这里为了保证主包的体积最优，则会先提取成一个公共模块，然后分别复制到对应分包的 sub-common 文件夹下（因为小程序无法跨分包引入文件，所以这里需要每个分包都复制一份），需要注意的是，这样会导致总包的体积变大一些。

3. 实例代码

module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true,
    },
  },
}
1
2
3
4
5
6
7
8
9

4. 部分依赖不走分包

如果有不想走分包提取规则的 module，可以在 exclude 中配置，这样该 module 就会走原来提取的方案，提取到主包中，比如像下面这样（支持绝对路径和函数）：

module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true,
      exclude: [path.resolve(__dirname, 'moduleName.js'), (module) => module.resource.indexOf('moduleName') >= 0],
    },
  },
}
1
2
3
4
5
6
7
8
9
10

5. 优化结果

5.1 优化前

5.2 优化后

注意：主包从 1.99MB 直接降到 1.35MB ，明显优化了主包大小。但是注意依赖被多个分包使用时，建议单独处理优化，如果依赖像 classNames 一样小，可以直接提取到主包，如果是像 im 的 UI 依赖一样大，建议还是提取到每个使用的分包中。

6. 智能提取分包依赖

智能提取分包依赖