Next.js 項目生產構建優化的完整教程，涵蓋配置、工具鏈和性能調優技巧，助你顯著加速 npm run build：

注：學習階段請先測試環境使用！

文章目錄

• • @[toc]
  • • 一、基礎優化
    • • 1. 確保使用最新版本
      • 2. 清理無用依賴和代碼
      • 3. 配置 `next.config.js` 基礎優化項
    • 二、Webpack 優化
    • • 1. 啟用多線程壓縮（TerserPlugin）
      • 2. 啟用持久化緩存
    • 三、環境與構建參數優化
    • • 1. 增加 Node.js 內存限制
      • 2. 選擇性生成靜態頁面
    • 四、使用分析工具
    • • 1. 構建產物分析
      • 2. 構建時間分析
    • 五、硬件級優化
    • • 1. 使用 SSD 磁盤
      • 2. 增加 CPU 核心
      • 3. 使用 SWC 替代 Babel（Next.js 13+ 默認）
    • 六、高級技巧
    • • 1. 模塊聯邦（微前端場景）
      • 2. 增量構建（僅限 monorepo）
    • 七、優化效果驗證
    • • 1. 構建時間對比
      • 2. 產物大小檢查
    • 優化前后對比示例
    • 注意事項

一、基礎優化

1. 確保使用最新版本

npm update next react react-dom --save

2. 清理無用依賴和代碼

# 分析包大小
npx depcheck
npx npm-check-unused

3. 配置 next.config.js 基礎優化項

// next.config.js
module.exports = {productionBrowserSourceMaps: false, // 關閉生產環境 SourceMapcompress: true, // 啟用 Gzip/Brotli 壓縮images: {formats: ['image/webp'], // 優先生成 WebP 格式minimumCacheTTL: 3600, // 圖片緩存時間},
};

---

二、Webpack 優化

1. 啟用多線程壓縮（TerserPlugin）

npm install terser-webpack-plugin --save-dev

// next.config.js
const TerserPlugin = require('terser-webpack-plugin');module.exports = {webpack: (config) => {config.optimization.minimizer = [new TerserPlugin({parallel: true, // 啟用多線程terserOptions: {compress: { drop_console: true }, // 移除 console},}),];return config;},
};

2. 啟用持久化緩存

// next.config.js
module.exports = {webpack: (config, { dev, isServer }) => {if (!dev && !isServer) {config.cache = {type: 'filesystem',buildDependencies: {config: [__filename],},};}return config;},
};

---

三、環境與構建參數優化

1. 增加 Node.js 內存限制

# 在 package.json 中修改
"scripts": {"build": "NODE_OPTIONS='--max-old-space-size=4096' next build"
}

2. 選擇性生成靜態頁面

# 僅構建必要頁面（適用于部分靜態站點）
next build --profile --debug

---

四、使用分析工具

1. 構建產物分析

npm install @next/bundle-analyzer --save-dev

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({enabled: process.env.ANALYZE === 'true',
});module.exports = withBundleAnalyzer({});

ANALYZE=true npm run build

2. 構建時間分析

npm install --save-dev speed-measure-webpack-plugin

// next.config.js
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();module.exports = smp.wrap({// 原有配置
});

---

五、硬件級優化

1. 使用 SSD 磁盤

• 機械硬盤 → SSD 可提升 50% 以上構建速度

2. 增加 CPU 核心

• Webpack 并行處理能力與 CPU 核心數正相關

3. 使用 SWC 替代 Babel（Next.js 13+ 默認）

// next.config.js
module.exports = {experimental: {forceSwcTransforms: true, // 強制使用 SWC},
};

---

六、高級技巧

1. 模塊聯邦（微前端場景）

// next.config.js
const { ModuleFederationPlugin } = require('webpack').container;module.exports = {webpack: (config) => {config.plugins.push(new ModuleFederationPlugin({name: 'host',remotes: {app1: 'app1@http://localhost:3001/remoteEntry.js',},}));return config;},
};

2. 增量構建（僅限 monorepo）

# 使用 Turborepo 加速 monorepo 構建
npm install turbo --save-dev

// package.json
"scripts": {"build": "turbo run build"
}

---

七、優化效果驗證

1. 構建時間對比

# 優化前
time npm run build# 優化后
time npm run build

2. 產物大小檢查

ls -lh .next/static/chunks

---

優化前后對比示例

優化項	構建時間 (s)	產物大小 (MB)
默認配置	120	45
基礎優化 + Webpack	85	38
全量優化	52	32

---

注意事項

1. 部分優化（如 drop_console）需根據項目需求選擇
2. 緩存可能導致構建結果不一致，必要時清理 .next/cache
3. 生產環境務必關閉 productionBrowserSourceMaps

按此方案優化后，多數項目構建速度可提升 30%~70%。建議逐步實施并驗證效果！