Optimizing Taro Compilation and Packaging with Webpack: Reducing Build Time and Package Size

The article begins by describing the growing compilation time problem in a Taro project that migrated from native WeChat mini‑programs to Taro, where a full build can take up to ten minutes and the generated bundle exceeds the 2 MB limit required for QR‑code preview.

It then explains that Taro’s build process is driven by webpack, located in @tarojs/mini-runner/dis/index.js. The key build function creates a webpack chain, merges user configuration, and finally runs the compiler. The source code of this function is shown:

export default async function build (appPath: string, config: IBuildConfig): Promise<webpack.Stats> {
  const mode = config.mode
  /** process config.sass options */
  const newConfig = await makeConfig(config)
  /** initialized chain */
  const webpackChain = buildConf(appPath, mode, newConfig)
  /** customized chain */
  await customizeChain(webpackChain, newConfig.modifyWebpackChain, newConfig.webpackChain)
  if (typeof newConfig.onWebpackChainReady === 'function') {
    newConfig.onWebpackChainReady(webpackChain)
  }
  /** webpack config */
  const webpackConfig: webpack.Configuration = webpackChain.toConfig()
  return new Promise<webpack.Stats>((resolve, reject) => {
    const compiler = webpack(webpackConfig) //调用webpack
    const onBuildFinish = newConfig.onBuildFinish
    let prerender: Prerender
    const onFinish = function (error, stats: webpack.Stats | null) {
      ...
    }
    const callback = async (err: Error, stats: webpack.Stats) => {
      ...
    }
    if (newConfig.isWatch) {
      bindDevLogger(compiler)
      compiler.watch({ aggregateTimeout: 300, poll: undefined }, callback)
    } else {
      bindProdLogger(compiler)
      compiler.run(callback)
    }
  })
}

Using speed-measure-webpack-plugin, the author identifies the most time‑consuming parts: TaroMiniPlugin, TerserPlugin, babel-loader, and sass-loader. To reduce the overall build time, two strategies are applied: multi‑core processing and caching.

Multi‑core : The official thread-loader is inserted before babel-loader via the modifyWebpackChain hook. The original script rule is deleted and a new rule with thread-loader and a cached babel-loader is merged:

ctx.modifyWebpackChain(args => {
  const chain = args.chain
  chain.module.rules.delete('script') // 删除Taro中配置的babel-loader
  chain.merge({ // 重新配置babel-loader
    module: {
      rule: {
        script: {
          test: /\.[tj]sx?$/i,
          use: {
            threadLoader: {
              loader: 'thread-loader', // 多核构建
            },
            babelLoader: {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true, // 开启babel-loader缓存
              },
            },
          },
        },
      },
    },
  })
})

Cache : cache-loader is placed before css-loader (after mini-css-extract-plugin) to cache SCSS processing, and babel-loader caching is enabled via cacheDirectory: true. The insertion is performed with webpack‑chain’s before method:

// 将cache-loader放置在css-loader之前，mini-css-extract-plugin之后
chain.module.rule('scss').oneOf('0').use('cacheLoader').loader('cache-loader').before('1')
chain.module.rule('scss').oneOf('1').use('cacheLoader').loader('cache-loader').before('1')

After applying these changes, the build time drops from roughly 3 minutes to about 57 seconds, roughly one‑third of the original duration, and the sizes of TaroMiniPlugin, babel-loader, and css-loader are noticeably reduced.

The article also addresses the 2 MB package‑size limitation for QR‑code preview. By adding terser-webpack-plugin (version 3.0.5 for compatibility with webpack 4) to the development webpack config and specifying the large output files in its test array, the main bundle is compressed from 3.45 MB to about 1.42 MB.

npm install -D [email protected]

The custom plugin is then referenced in config/dev.js so that compression only runs in development mode:

plugins: [
  path.resolve(__dirname, 'plugins/minifyMainPackage.js'),
]

Finally, the author packages the two optimizations into reusable npm plugins ( taro-plugin-compiler-optimization and a minify plugin) and provides installation commands and GitHub links for developers to integrate them into their own Taro projects.

In summary, by deeply understanding Taro’s webpack internals and applying multi‑core and caching techniques, the compilation speed can be reduced to one‑third, and by leveraging terser-webpack-plugin the bundle size can be cut below the 2 MB threshold, greatly improving developer experience for large Taro applications.