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

Dragon Wu2026-03-12 18:20

这样可以大大提升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'));
};

总结

核心提速项：cache.enable: true（必开）+ prebundle.enable: false（小项目必关）；
辅助优化：watchOptions 缩监听范围 + CSS 哈希缩短；
保留项：仅保留alias/plugins等开发必需配置，无多余内容。