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等开发必需配置,无多余内容。
相关推荐
谭光志37 分钟前
Vibe Coding 时代,程序员该何去何从
前端·后端·ai编程
仿生狮子2 小时前
别再说“全栈”了,AI 时代团队只认这 5 种人
前端·人工智能·后端
kyriewen3 小时前
AI 写的 React 组件,合并前必查的 6 个坏味道——每个都有代码对比
前端·javascript·react.js
Highcharts.js3 小时前
软件开发公司为什么选择 Highcharts?
前端·前端框架·echarts·数据可视化·技术选型·highcharts·图表工具
阿祖zu3 小时前
企业 AI 转型之痛,个人提效十倍不止,组织效率仍止步不前?
前端·aigc·agent
摇滚侠5 小时前
SpringBoot3+Vue3 全套视频教程 45-51
前端·javascript·vue.js
酸梅果茶5 小时前
【6】lightning_lm项目-LIO 前端 -点云预处理模块
前端·slam
Hilaku5 小时前
前端大裁员背后的恐慌:我们还剩什么底牌?
前端·javascript·程序员
这是个栗子5 小时前
uni-app微信小程序开发:高频核心 API(三)
微信小程序·小程序·uni-app
咖啡无伴侣6 小时前
unplugin-auto-import 使用详解+面试高频考点
前端·架构