Skip to main content
Version: 3.x

小程序编译优化指南

Taro 使用 Webpack 进行打包，当工程越来越庞大时，会出现打包时间过长等问题。另外，小程序严格的体积要求、不支持热更新等问题也对大型应用的工程化流程提出了非常大的优化挑战。

优化编译速度​

缓存与并行是进行性能优化的两个重要切入角度。智行小程序团队借助 cache-loader、thread-loader 开发了 taro-plugin-compiler-optimization 插件让 Taro 项目的编译时长减少为原来的三分之一。

详情请阅读文章《编写插件，将 Taro 编译打包耗时缩短至三分之一》。

用法​

安装依赖
npm install --save-dev thread-loader cache-loader taro-plugin-compiler-optimization
使用插件
// config/index.js
config = {
  // ...
  plugins: ['taro-plugin-compiler-optimization'],
}

效果展示​

优化前 3m9s，优化后 56.8s，将耗时缩短至三分之一。

优化前耗时：

优化前

优化后耗时：

优化后

解决包体积过大无法进行预览的问题​

智行小程序团队通过在开发环境下配置压缩指定文件，解决了小程序端包体积过大无法进行预览的问题。详情请阅读文章《编写插件，将 Taro 编译打包耗时缩短至三分之一》。

通过 webpackChain 配置解决开发环境下小程序包体积过大无法进行预览上传的问题(不影响 devtools 的使用)​

// config/dev.js
module.exports = {
  mini: {
    webpackChain: (chain, webpack) => {
      chain.merge({
        plugin: {
          install: {
            plugin: require('terser-webpack-plugin'),
            args: [
              {
                terserOptions: {
                  compress: true, // 默认使用terser压缩
                  // mangle: false,
                  keep_classnames: true, // 不改变class名称
                  keep_fnames: true, // 不改变函数名称
                },
              },
            ],
          },
        },
      })
    },
  },
}