两个配置 将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 前面即可生效

java 复制代码
 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
  1. 断点查看合并后的 webpack格式
  1. 根据看到的格式,添加自己的配置
php 复制代码
 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开启)
                  },
                },
              },
            },
          },
        },

       
       
      })
    },
相关推荐
HyaCinth4 天前
taro3.x + tailwindcss + zustand微信小程序模板
前端·react.js·taro
少恭写代码8 天前
duxapp放弃了redux,在duxapp中局部、全局状态的实现方案
react native·taro·redux·duxapp
Engss14 天前
Taro React-Native Android apk 打包
android·react native·taro
少恭写代码19 天前
通过duxapp提供的基础方法、UI组件、全局样式,快速编写项目
react native·移动开发·taro·duxapp
Feather_7420 天前
taro微信小程序assets静态图片不被编译成base64
微信小程序·小程序·taro
hammer101021 天前
taro底部导航,Tabbar
前端·typescript·taro
那就可爱多一点点24 天前
Taro构建的H5页面路由切换返回上一页存在白屏页面过渡
前端·微信小程序·taro
雪球干死黄旭东1 个月前
taro+taro-ui学习
学习·ui·taro
搬砖的前端1 个月前
微信小程序:miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具
ci/cd·微信小程序·taro
Lanwarf-前端开发1 个月前
Taro 中 echarts 图表使用
前端·echarts·taro