本地Nuxt项目构建耗时10分钟速度极慢，如何优化及禁用开发环境Eslint？

一、开发环境禁用Eslint校验 #

直接修改nuxt.config.js中buildModules的ESLint模块配置即可：

buildModules: [
  ['@nuxtjs/eslint-module', {
    // 开发环境禁用ESLint校验
    disable: process.env.NODE_ENV === 'development'
  }],
  '@nuxtjs/composition-api/module',
]

如果只需要禁用构建时的校验，保留编辑器本地校验，也可以将dev: false传入配置，只会在生产构建阶段运行ESLint。

二、构建速度提升方案 #

• 调整Node内存限制 #

  8G内存设备默认分配给Node的运行内存不足，会导致频繁GC拖慢构建速度，修改package.json中的构建命令，手动分配内存：

  {
    "scripts": {
      "build": "node --max-old-space-size=6144 node_modules/nuxt/bin/nuxt.js build"
    }
  }
  

• 优化构建基础配置 #

  修改nuxt.config.js的对应字段，减少不必要的编译逻辑：

  // 仅生产环境开启modern打包，避免开发环境打两份包
  modern: process.env.NODE_ENV === 'production',
  build: {
    // 开启多进程编译
    parallel: true,
    // 开启构建缓存，增量构建时可节省70%以上时间
    cache: true,
    transpile: ["vuex-stores"],
    loaders: {
      scss: {
        // 开发环境关闭sourceMap
        sourceMap: process.env.NODE_ENV === 'production',
        // 把dart-sass替换为sass-embedded，scss编译速度可提升50%以上
        implementation: require("sass-embedded"),
        additionalData: `@import "~@/assets/scss/_bulma_variables.scss"; @import "~@/assets/scss/variables.scss";`,
      },
    },
  }
  

• 优化大体积依赖 #

  当前项目全量引入了mdi图标库、地图、支付等重型依赖，可做如下优化：
  1. 把全量引入的@mdi/font/css/materialdesignicons.css替换为按需引入图标，仅导入项目用到的图标资源
  2. 所有客户端仅需的依赖（地图、支付、统计类SDK）使用动态导入语法，仅在调用对应功能时加载，减少初始构建的资源处理量

• 替换编译工具 #

  如果是Nuxt2项目，可以接入@nuxtjs/vite模块替换默认的webpack构建工具，开发环境构建速度可提升3-10倍，生产构建速度也有明显提升。

• 系统层面优化 #

  把项目目录添加到Windows Defender的排除扫描列表，避免杀毒软件实时扫描构建产生的大量临时文件拖慢速度；构建时关闭不必要的后台软件，释放内存给Node进程。

内容的提问来源于stack exchange，提问作者Čamo