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等开发必需配置,无多余内容。
相关推荐
ayqy贾杰17 分钟前
GPT-5.5+Codex全自动搓出macOS游戏,创作链路首次真正连续
前端·面试·游戏开发
英俊潇洒美少年2 小时前
Vue2/Vue3 vue-i18n完整改造流程(异步懒加载+后端接口请求)
前端·javascript·vue.js
空中海8 小时前
第七章:vue工程化与构建工具
前端·javascript·vue.js
zhensherlock9 小时前
Protocol Launcher 系列:Trello 看板管理的协议自动化
前端·javascript·typescript·node.js·自动化·github·js
zhuà!9 小时前
element的el-form提交校验没反应问题
前端·elementui
龙猫里的小梅啊9 小时前
CSS(一)CSS基础语法与样式引入
前端·css
小码哥_常9 小时前
从0到1,开启Android音视频开发之旅
前端
渔舟小调9 小时前
P19 | 前端加密通信层 pikachuNetwork.js 完整实现
开发语言·前端·javascript
qq_12084093719 小时前
Three.js 工程向:Draw Call 预算治理与渲染批处理实践
前端·javascript
2501_9160088911 小时前
深入解析iOS应用启动性能优化策略与实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone