在 Next.js 项目中结合 Webpack 实现高级功能：自定义配置详解

1. 基础 Webpack 配置（默认配置）

2. 自定义 Webpack 配置

示例：修改 Webpack 配置

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    // 在这里可以修改 Webpack 的配置

    // 例如：添加新的 loader 处理额外的文件类型
    config.module.rules.push({
      test: /\\.md$/,
      use: 'raw-loader',
    });

    // 针对服务端和客户端的不同配置
    if (!isServer) {
      config.resolve.fallback = {
        fs: false, // 禁用 Node.js 的 fs 模块（因为它在浏览器中无效）
      };
    }

    return config; // 返回修改后的配置
  },
};

3. 添加自定义加载器（Loader）

示例：添加 raw-loader 处理 .md 文件

npm install raw-loader --save-dev

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\\.md$/,
      use: 'raw-loader',
    });
    return config;
  },
};

import content from './example.md';

export default function Page() {
  return <div>{content}</div>;
}

4. 添加插件（Plugins）

示例：使用 WebpackBundleAnalyzer 插件

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

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

module.exports = withBundleAnalyzer({
  webpack(config) {
    return config;
  },
});

ANALYZE=true npm run build

1. Static Pages

• ✓ Generating static pages (56/56)：表示有 56 个静态页面已经生成完毕。

2. Collecting Build Traces & Finalizing Page Optimization

• ✓ Collecting build traces 和 ✓ Finalizing page optimization：Next.js 在构建过程中会收集性能数据和构建信息，最后对生成的页面进行优化，例如减少不必要的 JavaScript。

3. Route (pages)

• 列出的每个 URL 都代表项目中的一个页面。
• Route (pages)：显示的是页面的路径，比如 /about 表示 "关于我们" 页面。
• Size：生成的 HTML 文件的大小，例如 /about 页面生成的 HTML 文件大小是 328 B。
• First Load JS：浏览器加载该页面时首次加载的 JavaScript 大小。例如 /about 页面首次加载的 JavaScript 为 200 kB。

4. 各个符号的含义

• ○ (Static)：表示该页面是静态预渲染的，Next.js 在构建时生成的 HTML。

• ● (SSG)：表示该页面是通过静态生成 (Static Site Generation) 创建的，使用 getStaticProps 函数。

• ISR (Incremental Static Regeneration)：使用增量静态再生，页面会根据 getStaticProps 中的 revalidate 属性重新生成，时间间隔为 10 秒。例如 /post/[id] 页面每 10 秒再生一次，标注了生成时间（如 19092 ms）。

• ƒ (Dynamic)：动态渲染的页面，服务器按需渲染，通常用于 API 路由。

5. First Load JS shared by all

• 180 kB：这是所有页面共享的首次加载 JavaScript 大小，包含：
• framework-0995a3e8436ddc4f.js：包含 React 等基础框架代码，大小为 45.2 kB。
• main-7c8c8f27b5922ebf.js：主入口 JavaScript 文件，大小为 37.4 kB。
• pages/_app-6ff963fad8979e48.js：该文件包含 Next.js 应用的主要逻辑，大小为 79.1 kB。
• css/4ea43fdb72a5a3d4.css：共享的 CSS 文件，大小为 15.7 kB。

如何优化？

目标是减小首次加载的 JS 体积、减少渲染时间并优化静态资源。

1. First Load JS Size：
• 目前一些页面的首次加载 JS 在 200kB 左右，虽然还算合理，但可以进一步减少。通常，首次加载的 JS 尽量控制在 150kB 以下 是比较理想的，尤其是对于性能要求较高的页面。对于 SSR 和 CSR 项目，过大的 JS 会影响首次页面的加载和渲染。

2. 代码拆分和动态导入：
• 考虑使用 Next.js 提供的 动态导入 (dynamic imports)。通过代码拆分，页面只加载必要的部分，避免在初次加载时加载过多的内容。例如，对不常用的组件进行动态导入，减少无关代码的加载量。

import dynamic from 'next/dynamic';
const SomeComponent = dynamic(() => import('../components/SomeComponent'));

3. 依赖精简：
• 检查 node_modules 中引入的第三方库，确保没有引入过多不必要的依赖。大库可以考虑用轻量化的替代方案。例如，可以用 date-fns 替代 moment，因为 moment 比较大。

4. 压缩静态资源：
• 使用 Webpack 中的 TerserPlugin 压缩 JS，并通过 css-minimizer-webpack-plugin 压缩 CSS。确保这些插件启用了 gzip 或 brotli 压缩方式。

5. 图片优化：
• 使用 Next.js 内置的 next/image 组件来处理图片。Next.js 可以自动优化图片大小和格式，根据设备选择最佳的图片尺寸。

6. 分析并优化依赖包大小：
• 已经在使用 webpack-bundle-analyzer，这个工具可以帮分析各个依赖包的大小。重点关注体积较大的包，并尝试减少它们。可以进一步分析哪些包可以移除或用更小的替代品。

7. 优化 ISR 配置：
• 对 ISR (Incremental Static Regeneration) 页面，确保合理设置 revalidate 的时间。避免过于频繁的重新生成静态页面，以降低服务器的负担。

• 首次加载 JS 体积目标：将首次加载 JS 尽量控制在 150kB 以下。页面较多时，如果能保持在 100kB 左右则效果更好。

• 渲染时间：对于 ISR 页面，保持每个路径生成时间在 500ms-1000ms 是比较理想的。当前一些页面的生成时间较长（如 41380ms），可以通过缓存策略或减少内容来优化。

5. 自定义别名（Alias）

示例：配置路径别名

module.exports = {
  webpack: (config) => {
    config.resolve.alias['@components'] = path.join(__dirname, 'components');
    return config;
  },
};

import Header from '@components/Header';

6. 代码分割与动态导入

示例：动态导入组件

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
});

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <DynamicComponent />
    </div>
  );
}

7. 环境变量与编译配置

示例：使用环境变量控制打包行为

module.exports = {
  webpack: (config, { isServer }) => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境优化配置
      config.optimization.minimize = true;
    }
    return config;
  },
};

8. 处理 CSS 和 Sass

示例：自定义 Sass 配置

npm install sass

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: '@import "variables.scss";', // 全局注入 Sass 变量
          },
        },
      ],
    });
    return config;
  },
};

9. SSR 与 Webpack 配置

示例：不同环境的配置

module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      // 服务端专用配置
      config.externals = ['some-server-only-package'];
    } else {
      // 客户端专用配置
      config.resolve.alias['@env'] = path.resolve(__dirname, 'env/client.js');
    }
    return config;
  },
};

总结