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等开发必需配置,无多余内容。
相关推荐
早已忘记11 小时前
CI相关项
java·前端·ci/cd
freewlt18 小时前
前端性能优化实战:从 Lighthouse 分数到用户体验的全面升级
前端·性能优化·ux
小小亮0118 小时前
Next.js基础
开发语言·前端·javascript
华洛18 小时前
我用AI做了一个48秒的真人精品漫剧,不难也不贵
前端·javascript·后端
Novlan119 小时前
我把 Claude Code 里的隐藏彩蛋提取出来了——零依赖的 ASCII 虚拟宠物系统
前端
IAUTOMOBILE19 小时前
Python 流程控制与函数定义:从调试现场到工程实践
java·前端·python
好大哥呀20 小时前
C++ Web 编程
开发语言·前端·c++
爱学习的小仙女!20 小时前
面试题 前端(一)DOCTYPE作用 标准模式与混杂模式区分
前端·前端面试题
小小小小宇21 小时前
前端转后端基础- 变量和类型
前端
Cobyte1 天前
1.基于依赖追踪和触发的响应式系统的本质
前端·javascript·vue.js