Next+React项目启动慢刷新慢的解决方法

上班的时候遇到公司Next+React项目启动很慢，更改样式也加载半天，十分影响开发效率，在前辈的改动下，运行速度加快了很多，特此学习记录。

目录

一、为什么移除开发模式下的 webpack-dev-server，项目变快？ 

二、webpack-dev-server 相关入口文件是什么？

三、webpack-dev-server 相关入口文件的典型示例

1. 客户端脚本

2. 热更新运行时

3. 代理配置相关文件

四、为什么这些文件会被注入

在 next.config.js 中编写如下代码：

/** @type {import('next').NextConfig} */
const WindiCSSWebpackPlugin = require('windicss-webpack-plugin');

module.exports = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_APP_ENV: process.env.NEXT_PUBLIC_APP_ENV,
  },
  images: {
    loader: 'imgix',
    unoptimized: true,
    path: 'http://uat.onetouch-tech.com/',
  },
  webpack(config, { dev }) {
    // 如果是开发模式 (dev)，处理 config.entry
    if (dev) {
      // 确保 config.entry 是一个数组
      if (Array.isArray(config.entry)) {
        config.entry = config.entry.filter(entry => !entry.includes('webpack-dev-server'));
      } else if (typeof config.entry === 'object') {
        // 如果 config.entry 是对象形式，逐个遍历它的条目
        Object.keys(config.entry).forEach(key => {
          config.entry[key] = config.entry[key].filter(entry => !entry.includes('webpack-dev-server'));
        });
      }
      config.plugins.push(new WindiCSSWebpackPlugin());
     
    }

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

• if (dev)：这部分配置只在开发模式下执行，确保只有在开发模式下才会进行相应的处理。
• config.entry 处理：
  • 这一段的代码过滤掉了 Webpack 内部的 webpack-dev-server 条目。webpack-dev-server 是开发环境下的一个内置服务，用于热模块重载（HMR）。但是，在 Next.js 中，热更新本身是通过 Next.js 自己的开发服务器来处理的，所以删除这些条目可以减少冗余配置，减少 Webpack 的开销。
• config.plugins.push(new WindiCSSWebpackPlugin())：
  • 这个插件是 WindiCSS 的 Webpack 插件。WindiCSS 是一个类似于 TailwindCSS 的工具，但它通过按需生成 CSS 来减少样式文件的大小，从而提升性能。这个插件会在构建过程中自动生成并优化使用到的 CSS 类，避免了不必要的样式文件的生成，从而减小了最终包的大小。

一、为什么移除开发模式下的 webpack-dev-server，项目变快？ 

webpack-dev-server 是 Webpack 提供的一个开发服务器，它通常用来提供热模块替换（HMR）和实时更新功能。在默认情况下，webpack-dev-server 会监视你的文件系统，当检测到文件发生变化时，立即重新构建并更新页面。 

如果你移除了 webpack-dev-server，启用了 Next.js 自带的 HMR（热模块替换）机制，它通常比 Webpack 默认的 webpack-dev-server 实现更加高效，尤其是在大量代码变更时，Next.js 会尽量只更新实际变更的部分，而不是重新构建整个应用。

过滤 webpack-dev-server 相关入口

!entry.includes('webpack-dev-server')

• 作用：排除所有包含 webpack-dev-server 字符串的入口文件

• 原因：在 Next.js 开发模式下，默认可能包含以下冗余入

• 效果：减少约 15-30% 的初始构建文件数量

二、webpack-dev-server 相关入口文件是什么？

webpack-dev-server 相关入口文件 是指在 Webpack 配置中，由 webpack-dev-server 自动注入或显式引入的、用于支持开发服务器功能的文件。这些文件通常是客户端脚本，用于实现 热更新（HMR） 和 实时重载（Live Reload） 等功能。

三、webpack-dev-server 相关入口文件的典型示例

1. 客户端脚本

node_modules/webpack-dev-server/client/index.js

• 作用：

  • 建立 WebSocket 连接，与开发服务器通信

  • 接收服务器推送的更新消息（如文件变更）

  • 触发浏览器的热更新或页面重载

2. 热更新运行时

node_modules/webpack/hot/dev-server.js

• 作用：

  • 实现模块热替换（HMR）的核心逻辑

  • 管理模块的加载和替换

  • 处理更新失败时的回退逻辑

3. 代理配置相关文件

node_modules/webpack-dev-server/client/socket.js

• 作用：

  • 处理 WebSocket 连接的建立和维护

  • 支持开发服务器的代理功能

四、为什么这些文件会被注入

• webpack-dev-server 在启动时，会自动将这些文件添加到 Webpack 的入口配置中

• 目的是确保开发服务器功能（如 HMR）能够正常工作