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等开发必需配置,无多余内容。
相关推荐
fangdengfu12310 分钟前
ES分析系统各个服务日志占用量
java·前端·elasticsearch
JustHappy2 小时前
古法编程秘籍(六):程序到底是怎么跑起来的?从 IO 到中断,一次讲明白
前端·后端·全栈
HYCS2 小时前
用pixi.js实现fabric.js(六):从线性代数的角度理解编辑器交互
前端·javascript·canvas
卷帘依旧2 小时前
useImperativeHandle的作用
前端
卷帘依旧3 小时前
Hooks在Fiber上的存储原理
前端
you45803 小时前
学成在线--day02 CMS前端开发(含Vue基础知识得回顾)
前端·javascript·vue.js
xiaofeichaichai3 小时前
虚拟 DOM
前端·javascript·vue.js
CRMEB系统商城3 小时前
CRMEB多商户系统(Java)v2.3公测版发布
java·开发语言·人工智能·小程序·开源·php
2401_878454533 小时前
前端高频得手写题
前端