两个配置 将taro编译速度优化为原来的1/3

背景：

由于公司taro小程序项目比较庞大，每次启动编译都需要花费大约70s(加上sourceMap配置后接近90s),每次等待项目启动编译结束都是漫长的，同时由于涉及生产环境，项目版本框架都无法轻易升级。这里通过两个babel配置将二次编译速度缩减到20s左右。 优化前：

优化后：

注：

本文核心配置都借鉴自 cloud.tencent.com/developer/a...

1、使用到的plugin

• progress-bar-webpack-plugin: 查看编译进度
• speed-measure-webpack-plugin: 可以看到各个 loader、plugin 的构建时长，后续可针对耗时 loader、plugin 进行优化。

2、使用到的loader

• thread-loader: 利用cpu多核，将耗时任务丢到单独的进程里执行 注意：thread-loader 只有在中大型项目中 提速效果才会比较明显，小型项目中甚至会让编译时间增长
• cache-loader: 每个模块的处理结果缓存到磁盘上的文件中。当下一次构建时，如果模块的内容没有发生变化，cache-loader 将直接从缓存中读取处理结果，而不会再次执行相同的处理过程。这样可以避免重复的耗时操作，加速构建过程。

3、webpack中的配置方法 直接将cache-loader 和thread-loader 前面即可生效

 module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.js$/, // 指定需要使用 thread-loader 的文件类型
        use: [
          'cache-loader',
          'thread-loader', // 在这里添加 thread-loader
          // 其他 loader
          // 例如：'babel-loader'
        ],
      },
      // 其他规则
    ],
  },
};

二、在taro项目中如何进行配置 主要针对 webpack4,webpack5 优化非常简单可以直接搜索其他文章学习

遇到的问题：webpack4 匹配的 thread-loader和babel-loader版本都是2. 不指指定版本安最新版 会报 this.getOptions is not a function 的错误

1. 找到taro框架合并后的webpack对象 地址 @tarojs/mini-runner/dis/index.js

2. 断点查看合并后的 webpack格式

3. 根据看到的格式，添加自己的配置

 webpackChain: (chain, _webpack) => {
  <!-- 先删除  taro自带的babel配置-->
      chain.module.rules.delete('script')
      <!-- 在scss-loader之前加入cacheLoader 为什么这样配置，前面的参考原文中有讲述，不再赘述-->
       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')
      chain.merge({
        module: {
          rule: {
            script: {
              test: /\.[tj]sx?$/i,
              use: {
                threadLoader: {
                  loader: 'thread-loader', // 多核构建
                },
                babelLoader: {
                  loader: 'babel-loader',
                  options: {
                    cacheDirectory: true, // （除了可以是用cache-loader开启缓存也可以用过配置cacheDirectory: true开启）
                  },
                },
              },
            },
          },
        },

       
       
      })
    },