上班的時(shí)候遇到公司Next+React項(xiàng)目啟動(dòng)很慢，更改樣式也加載半天，十分影響開發(fā)效率，在前輩的改動(dòng)下，運(yùn)行速度加快了很多，特此學(xué)習(xí)記錄。

在 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 }) {
    // 如果是開發(fā)模式 (dev)，處理 config.entry
    if (dev) {
      // 確保 config.entry 是一個(gè)數(shù)組
      if (Array.isArray(config.entry)) {
        config.entry = config.entry.filter(entry => !entry.includes('webpack-dev-server'));
      } else if (typeof config.entry === 'object') {
        // 如果 config.entry 是對(duì)象形式，逐個(gè)遍歷它的條目
        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)：這部分配置只在開發(fā)模式下執(zhí)行，確保只有在開發(fā)模式下才會(huì)進(jìn)行相應(yīng)的處理。

config.entry 處理：

• 這一段的代碼過濾掉了 Webpack 內(nèi)部的 webpack-dev-server 條目。webpack-dev-server 是開發(fā)環(huán)境下的一個(gè)內(nèi)置服務(wù)，用于熱模塊重載（HMR）。但是，在 Next.js 中，熱更新本身是通過 Next.js 自己的開發(fā)服務(wù)器來處理的，所以刪除這些條目可以減少冗余配置，減少 Webpack 的開銷。

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

• 這個(gè)插件是 WindiCSS 的 Webpack 插件。WindiCSS 是一個(gè)類似于 TailwindCSS 的工具，但它通過按需生成 CSS 來減少樣式文件的大小，從而提升性能。這個(gè)插件會(huì)在構(gòu)建過程中自動(dòng)生成并優(yōu)化使用到的 CSS 類，避免了不必要的樣式文件的生成，從而減小了最終包的大小。

一、為什么移除開發(fā)模式下的 webpack-dev-server，項(xiàng)目變快？ 

webpack-dev-server 是 Webpack 提供的一個(gè)開發(fā)服務(wù)器，它通常用來提供熱模塊替換（HMR）和實(shí)時(shí)更新功能。在默認(rèn)情況下，webpack-dev-server 會(huì)監(jiān)視你的文件系統(tǒng)，當(dāng)檢測(cè)到文件發(fā)生變化時(shí)，立即重新構(gòu)建并更新頁面。 

如果你移除了 webpack-dev-server，啟用了 Next.js 自帶的 HMR（熱模塊替換）機(jī)制，它通常比 Webpack 默認(rèn)的 webpack-dev-server 實(shí)現(xiàn)更加高效，尤其是在大量代碼變更時(shí)，Next.js 會(huì)盡量只更新實(shí)際變更的部分，而不是重新構(gòu)建整個(gè)應(yīng)用。

過濾 webpack-dev-server 相關(guān)入口

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

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

原因：在 Next.js 開發(fā)模式下，默認(rèn)可能包含以下冗余入

效果：減少約 15-30% 的初始構(gòu)建文件數(shù)量

二、webpack-dev-server 相關(guān)入口文件是什么？

webpack-dev-server 相關(guān)入口文件 是指在 Webpack 配置中，由 webpack-dev-server 自動(dòng)注入或顯式引入的、用于支持開發(fā)服務(wù)器功能的文件。這些文件通常是客戶端腳本，用于實(shí)現(xiàn) 熱更新（HMR） 和 實(shí)時(shí)重載（Live Reload） 等功能。

三、webpack-dev-server 相關(guān)入口文件的典型示例

1. 客戶端腳本

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

作用：

• 建立 WebSocket 連接，與開發(fā)服務(wù)器通信

• 接收服務(wù)器推送的更新消息（如文件變更）

• 觸發(fā)瀏覽器的熱更新或頁面重載

2. 熱更新運(yùn)行時(shí)

node_modules/webpack/hot/dev-server.js

作用：

• 實(shí)現(xiàn)模塊熱替換（HMR）的核心邏輯

• 管理模塊的加載和替換

• 處理更新失敗時(shí)的回退邏輯

3. 代理配置相關(guān)文件

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

作用：

• 處理 WebSocket 連接的建立和維護(hù)

• 支持開發(fā)服務(wù)器的代理功能

四、為什么這些文件會(huì)被注入

webpack-dev-server 在啟動(dòng)時(shí)，會(huì)自動(dòng)將這些文件添加到 Webpack 的入口配置中

目的是確保開發(fā)服務(wù)器功能（如 HMR）能夠正常工作

到此這篇關(guān)于Next+React項(xiàng)目啟動(dòng)慢刷新慢的解決方法小結(jié)的文章就介紹到這了,更多相關(guān)Next+React項(xiàng)目啟動(dòng)慢刷新慢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論