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

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

在 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）能够正常工作

到此这篇关于Next+React项目启动慢刷新慢的解决方法小结的文章就介绍到这了,更多相关Next+React项目启动慢刷新慢内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论