React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > Next+React项目启动慢刷新慢

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

作者:一朵好运莲

本文主要介绍了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 处理:

config.plugins.push(new WindiCSSWebpackPlugin()):

一、为什么移除开发模式下的 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

作用:

2. 热更新运行时

node_modules/webpack/hot/dev-server.js

作用:

3. 代理配置相关文件

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

作用:

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

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

目的是确保开发服务器功能(如 HMR)能够正常工作

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

您可能感兴趣的文章:
阅读全文