Taro 编译打包尝试

编译耗时分析

speed-measure-webpack-plugin 插件能够列出输出、loader和plugins的耗时

Taro项目中引入插件

安装

npm install --save-dev speed-measure-webpack-plugin

修改@tarojs/mini-runner/dis/index.js

// Taro 是在@tarojs/mini-runner/dis/index.js 文件中，调用了 webpack 进行打包
const speedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new speedMeasurePlugin();
......
function build(appPath, config) {
    ...
  let  webpackConfig = webpackChain.toConfig();
  const onBuildFinish = config.onBuildFinish;
  webpackConfig = smp.wrap(webpackConfig);
  const compiler = webpack(webpackConfig);
  return new Promise((resolve, reject) => {
      ...
  })
}
......

编译结果

多进程打包 thread-loader & 缓存 cache-loader，babel-loader

安装

npm install --save-dev thread-loader cache-loader babel-loader

webpack plugins

// config/plugins/comoilerPlu.js
module.exports = (ctx) => {
  ctx.modifyWebpackChain(args => {
    const chain = args.chain
    chain.module.rules.delete('script')
    chain.merge({
      module: {
        rule: {
          script: {
            test: /\.[tj]sx?$/i,
            use: {
              threadLoader: {
                loader: 'thread-loader',
                options: {
                  workers: 3,
                  workerParallelJobs: 30,
                }
              }
            },
          },
        },
      },
    })
    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')
  })
}
// config/index.js  引入插件 plugins/compilerPlu.js
......
const config = {
    ...
  plugins: [
    '@tarojs/plugin-sass',
    '@tarojs/plugin-terser',
    path.resolve(__dirname, 'plugins/compilerPlu.js')
  ],
  ...
} 
......

编译结果

结论

引入插件后编译时间没有明显改变

terser-webpack-plugin 文件压缩

‘@tarojs/plugin-terser’, 插件中已引入此插件

参考文档

编写插件，将 Taro 编译打包耗时缩短至三分之一