Taro Webpack 5 编译过慢的解决方案

这样可以大大提升Taro webpack编译的效率,亲测从6秒降到1秒不到!

javascript 复制代码
const path = require('path');

// 仅保留编译提速核心配置的极简版
const config = {
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: ['@tarojs/plugin-html'], // 保留原有必要插件
  alias: {
    '@': path.resolve(__dirname, '..', 'src') // 保留常用别名
  },
  // 1. 核心:开启Taro内置持久化缓存(提速80%+)
  cache: {
    enable: true
  },
  framework: 'react',
  compiler: {
    type: 'webpack5',
    // 2. 小项目关键:关闭预打包,避免额外编译耗时
    prebundle: { enable: false }
  },
  // 3. 缩小监听范围,减少无效编译检测
  watchOptions: {
    ignored: ['**/node_modules/**', '**/dist/**', '**/mocks/**', '**/docs/**']
  },
  mini: {
    postcss: {
      cssModules: {
        enable: true,
        config: {
          generateScopedName: '[local]_[hash:base64:3]'  // 4. 优化CSS编译:缩短哈希长度,减少计算量
        }
      }
    }
  }
};

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'));
  }
  return merge({}, config, require('./prod'));
};

总结

  1. 核心提速项:cache.enable: true(必开)+ prebundle.enable: false(小项目必关);
  2. 辅助优化:watchOptions 缩监听范围 + CSS 哈希缩短;
  3. 保留项:仅保留alias/plugins等开发必需配置,无多余内容。
相关推荐
ljt27249606619 小时前
Flutter笔记--envied
前端·笔记·flutter
show4339 小时前
2026小程序端AI配音技术实现:TTS多音色引擎集成与MP3生成优化
人工智能·小程序
Flynt9 小时前
React Router v8 升了之后,我花了两天才把项目跑起来
前端·typescript·preact
泯泷16 小时前
手搓JSVMM第 8 篇:函数调用:参数、返回值与调用帧
前端·javascript·前端框架
Sherotree16 小时前
Google Antigravity——Agent 被提到主界面
前端·ide·后端·edge浏览器
里欧跑得慢17 小时前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
里欧跑得慢17 小时前
Flutter 三方库 function_tree — 鸿蒙应用开发中的动态数学公式解析与计算神器,实现鸿蒙深度适配下的复杂函数逻辑运行时求值实战(适配鸿蒙 HarmonyOS Next ohos)
android·前端·安全·flutter·华为·harmonyos
苏灿烤鱼18 小时前
没有机密文件,也没有付费数据,在浏览器里造一颗"间谍卫星"
前端·javascript·github
泯泷18 小时前
手搓JSVM第 5 篇:写第一个编译器:从 AST 生成 IR
前端·javascript·算法
泯泷18 小时前
手搓JSVM第 7 篇:控制流:if、while 与 jump
前端·javascript·算法