微信小程序包体积优化

方案如下

• 分包加载
• 尽量避免引入本地图片
• 组件按需引入
• 优化打包策略

组件按需引入

taro-ui

css 和组件都需要按需引入。

// ❌ 这样会打包所有的css文件
@import "~taro-ui/dist/style/index.scss";

// ❌ 这样会打包所有的taro组件文件
import { AtRate } from 'taro-ui';

// ✅  只会打包引入的样式文件
@import '~taro-ui/dist/style/components/rate.scss';
@import '~taro-ui/dist/style/components/icon.scss';

// ✅ 只会打包引入的taro组件文件
import { AtRate } from 'taro-ui/lib/index';

lodash

// ❌  下面2种方式都会打包整个lodash包
import _ from 'lodash';
import { debounce } from 'lodash';

// ✅  只会打包引入的内容
import _debounce from 'lodash/debounce';

优化打包策略

mini.optimizeMainPackage

在Taro中，如果一个module(js|wxss)，被引入2次及以上，那么就会被打包到commonChunks（主包）中；如果这个module没有被主包使用，那就会增加主包的体积，而这个配置就可以解决这个问题。

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

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

// config/index.js
module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true
    }
  }
}

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

module.exports = {
  // ...
  mini: {
    // ...
    optimizeMainPackage: {
      enable: true,
      exclude: [
        path.resolve(__dirname, 'moduleName.js'),
        (module) => module.resource.indexOf('moduleName') >= 0
      ]
    }
  }
}