Taro小程序冷构建优化

一、背景概要

(一) 当前现状及问题

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

(二) 技改价值

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

(三) 项目目标

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

二、分析工具

php 复制代码
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
chain.plugin('webpack-bundle-analyzer').use(
  new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    reportFilename: 'report.html',
  }),
);
php 复制代码
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策略
arduino 复制代码
[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进行处理

php 复制代码
  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')

yaml 复制代码
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等功能

arduino 复制代码
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左右

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

yaml 复制代码
cache: {
    enable: true, 
}

五、结果分析

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

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

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

相关推荐
岁月宁静2 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者2 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~3 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge3 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再3 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴3 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟4 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1234 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚5 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院5 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js