Nuxt.js SSR构建速度优化方案

最近在项目中遇到Nuxt.js SSR构建时间过长的问题，经过深入排查和优化，总结出以下解决方案。

问题现象

使用默认配置的nuxt build命令，构建时间长达15-20分钟，严重影响开发效率。

根本原因分析

通过webpack-bundle-analyzer定位发现，主要瓶颈在于：

依赖包过大 - node_modules中存在多个大型依赖
代码分割不合理 - 所有页面打包到一个chunk中
babel编译耗时 - 未启用缓存机制

解决方案

1. 启用Babel缓存

// nuxt.config.js
export default {
  build: {
    babel: {
      cache: true,
      presets: [
        ['@babel/preset-env', {
          useBuiltIns: 'usage',
          corejs: 3
        }]
      ]
    }
  }
}

2. 配置代码分割

// nuxt.config.js
export default {
  build: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            name: 'vendor',
            test: /[\\/](node_modules)[\\/]|
            chunks: 'all',
          }
        }
      }
    }
  }
}

3. 按需加载第三方库

// plugins/element-ui.js
import Vue from 'vue'
import { Button, Input, Table } from 'element-ui'
Vue.use(Button)
Vue.use(Input)
Vue.use(Table)

效果对比

优化前：18分钟优化后：3分钟

通过以上优化，构建速度提升约83%，显著改善了开发体验。

笑看风云 · 2026-01-08T10:24:58

Babel缓存确实能省下不少时间，但别忘了配合`@nuxtjs/eslint-module`的ignoreDuringBuilds配置，避免构建时重复检查。

ColdFace · 2026-01-08T10:24:58

splitChunks配置要结合实际路由结构，否则容易产生大量小chunk，反而拖慢打包速度，建议用`webpack-bundle-analyzer`调优。

CalmSoul · 2026-01-08T10:24:58

按需加载第三方库是王道，但记得配合Tree Shaking，比如Element UI这种组件库必须用babel-plugin-component或类似插件。

HardYvonne · 2026-01-08T10:24:58

别忘了开启`transpile`选项只编译必要的依赖，否则所有node_modules都会被babel处理，构建时间直接翻倍

Nuxt.js SSR构建速度优化方案