Taro小程序冷构建优化

一、背景概要

(一) 当前现状及问题

原生化构建耗时过长，微信小程序/支付宝小程序/MPAAS本地开发冷构建在35s左右，mpaas的热更新构建能长达1m，严重降低了原生化开发效率，开发时一旦不小心删了一个空格保存，就开始了长达1分钟苦不堪言的编译等待。

(二) 技改价值

提高打包构建效率，提升团队原生化开发效率

(三) 项目目标

总体冷构建时间优化30%，二次构建时间优化30%，热更新构建时间优化30%，如：35s优化到24s左右

二、分析工具

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
chain.plugin('webpack-bundle-analyzer').use(
  new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    reportFilename: 'report.html',
  }),
);

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
chain.plugin('speed-measure-webpack-plugin').use(
  new SpeedMeasurePlugin()
);

三、构建分析

(一) 构建速度分析：根据SpeedMeasurePlugin插件对项目当前的打包速度进行分析，发现其中less-loader/postcss-loader/babel-loader 耗时过长

(二) 包体积分析：根据分析结果可以看到订单详情/订单提交/车型列表占据体积比重较大

四、解决方案

(一) 编写打包插件进行处理，目前插件集成的能力有

1. 构建速度分析

2. 包体积分析

3. 关闭编译时性能告警

不需要进行观测体积时可本地手动关闭性能告警

4. 处理偶现因中文字符导致非预期token【实验性功能】

编译运行时没有代码改动也会偶现Invalid or unexpected token报错，排查发现有时编译运行时会把代码里的个别枚举中文字符识别成乱码导致无法运行

5. 开启cache-loader缓存scss策略

[BuildPlugin,
 {
   enable: true, // 是否开启插件功能
   useMeasure: false, // 开启构建速度分析
   useAnalyzer: false, // 开启包体积分析
   useEncoding: false, // 偶现因中文字符导致非预期token临时使用【Invalid or unexpected token】
   closePerformance: false, // 关闭编译时的性能告警
   closeScssCache: false, // 默认开启cache-loader缓存scss策略
 },
]

(二) 核心能力：使用多线程+缓存对主要的js/ts/jsx/tsx进行处理

  chain.module.rules.delete('script');
    chain.merge({
      module: {
        rule: {
          script: {
            test: /.[tj]sx?$/i,
            use: {
              threadLoader: {
                loader: 'thread-loader',
                options: {
                  workerParallelJobs: 10, // 每个 worker 并行执行的任务数，默认是 2
                  poolTimeout: Infinity,
                },
              },
              babelLoader: {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true,
                },
              },
            },
          },
        },
      },
    });

(三) 使用内置taro内置terser配置代替plugin: require('terser-webpack-plugin')

terser: {
    enable: true,
    config: {
      output: {
        comments: false,
      },
      compress: {
        warnings: false,
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log']
      },
      mangle: true,
      keep_classnames: false,
      keep_fnames: false,
    },
}

(四) 在本地构建环境下使用esbuild，打包速度比terser快6s左右，但是生产打包仍需使用terser，因为需要处理删除console.log等功能

const isDevBuild = process.env.BUILD_ENV === 'dev';

jsMinimizer: isDevBuild ? 'esbuild' : 'terser',
esbuild: {
    minify: {
      enable: true,
      config: {
        target: 'es2018',
        sourcemap: true,
      },
    },
}

(五) 在alipay和mpaas设置 NODE_ENV 为 production 开启压缩，在微信小程序不设置NODE_ENV=production，因为会导致构建时间多6s左右

(六) 开启持久化缓存，能极大加快二次构建速度，偶现未知问题需要重新编译

cache: {
    enable: true, 
}

五、结果分析

总构建时间优化了40%左右，比目标预期30%高出10%

二次构建时间优化了90%左右，比目标预期30%高出60%

热更新构建时间优化了75%-90%，比目标预期30%高出45%-60%