一、 什么是code split

Webpack的code split是一種技術，它能夠將代碼分割成多個塊，從而優(yōu)化應用程序的性能。這樣做可以實現(xiàn)按需加載和并行加載，從而減少初始化時間和請求次數(shù)。Code split在Webpack中通過使用entry語法和各種Loader和插件來實現(xiàn)，可以將代碼分割成多個文件，然后在需要時加載它們。它可以適用于任何類型和大小的應用程序，尤其適合大型單頁應用和跨頁面共享代碼的應用程序。

二、code split 打包多入口文件

webpack的code split可以通過在webpack.config.js配置文件中設置entry和output來實現(xiàn)。entry指定入口文件，可以通過設置多個entry來實現(xiàn)code split。output則指定輸出文件名和輸出目錄。

例如，我們可以在webpack.config.js中設置多個entry，如下所示：

entry: {
  app: './src/app.js',
  vendor: ['react', 'react-dom', 'lodash'],
  polyfills: './src/polyfills.js'
},

其中，app是我們應用程序的入口，vendor包含了我們使用的第三方庫，polyfills包含了需要兼容舊瀏覽器的代碼。

接著，在output中，我們可以使用占位符來設置文件名：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[chunkhash].js'
}

其中，name指entry的鍵名，chunkhash表示根據(jù)文件內(nèi)容生成的哈希字符串，可以保證文件名的唯一性。

最終，我們的應用程序會被分成多個小的JavaScript文件，例如：

• app.1a2b3c.js
• vendor.4d5e6f.js
• polyfills.7g8h9i.js

這樣可以有效地縮短頁面加載時間和提高應用程序的性能。

三、code split 提取公共代碼

Webpack的Code Split技術可以幫助我們提取公共代碼，減少頁面的加載時間，提高頁面的性能。下面我舉一個例子來說明如何使用Webpack的Code Split技術提取公共代碼。

假設我們有一個應用程序，其中包含兩個頁面：首頁和用戶頁面。我們想要提取公共代碼以減少頁面的下載時間。為此，我們可以使用Webpack的多個入口特性，其中每個入口都是一個單獨的JavaScript文件。

首先，在我們的Webpack配置文件中，定義兩個入口文件，如下所示：

entry: {
  home: './src/home.js',
  user: './src/user.js'
}

然后，我們可以在每個入口文件中使用Webpack的動態(tài)導入技術來加載共享模塊。這里，我們使用import()函數(shù)來導入一個包含公共代碼的JavaScript文件：

// home.js
import(/* webpackChunkName: "common" */ './common.js').then(common => {
  console.log(common.foo());
});

// user.js
import(/* webpackChunkName: "common" */ './common.js').then(common => {
  console.log(common.bar());
});

在這里，我們使用了webpackChunkName選項來給加載的公共代碼 chunk 命名（這里命名為 common）。這個命名選項對代碼拆分起著重要的作用，因為它使得Webpack可以創(chuàng)建一個獨立的chunk包，其中包含所有的公共模塊。

最后，我們需要在Webpack的配置文件（比如output選項中）中配置Chunk文件的輸出路徑和名稱。我們可以使用Webpack的[name]變量來指定Chunk文件的名稱，如下所示：

output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[name].[chunkhash].js',
  ...
}

在這里，我們配置了Webpack的輸出路徑和文件名，使用[name]變量來指定Chunk的名稱。這意味著，生成的Chunk文件分別為home.common.js和user.common.js（如果我們在之前的代碼中使用了不同的名稱，則Chunk文件的名稱也相應發(fā)生更改）。

通過這種方式，我們可以在Webpack中實現(xiàn)Code Split技術，將公共模塊提取出來并將它們放在一個獨立的Chunk文件中，從而提高頁面性能和用戶體驗。

四. code split 實現(xiàn)按需加載

Webpack的Code Split技術可以將一個大型的應用程序代碼拆分成更小的代碼塊，以便按需加載。這樣可以提高應用程序的性能和用戶體驗，因為只有在需要時才會加載所需的代碼。以下是實現(xiàn)按需加載的步驟：

1. 定義入口文件和輸出文件

在webpack配置文件中，需要定義應用程序的入口文件和輸出文件。例如，定義入口文件為app.js，輸出文件為bundle.js。

entry: {
  app: './app.js'
},
output: {
  filename: 'bundle.js'
}

2. 使用webpack的splitChunks配置項

使用webpack的splitChunks配置項來將應用程序代碼拆分成更小的代碼塊。可以根據(jù)模塊的大小、共享依賴項或按需加載等條件來進行拆分。例如，使用以下配置將共享依賴項打包到一個名為vendors的代碼塊中。

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

3. 在應用程序中按需加載代碼

可以使用webpack的動態(tài)import語法來按需加載代碼塊。例如，以下代碼將異步加載名為lazyModule的代碼塊。

import('./lazyModule')
  .then(module => {
    // 模塊加載完成后的操作
  })
  .catch(error => {
    // 模塊加載失敗的處理
  });

舉例說明：

假設我們有一個應用程序，其中包含三個頁面，每個頁面都有自己的代碼。我們可以將代碼拆分成三個代碼塊，以便按需加載。每個頁面的代碼可以使用動態(tài)import語法按需加載。

entry: {
  home: './home.js',
  about: './about.js',
  contact: './contact.js'
},
output: {
  filename: '[name].bundle.js',
  path: __dirname + '/dist'
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

現(xiàn)在，在我們的應用程序中，可以使用動態(tài)import語法來按需加載每個頁面的代碼。

// 加載home頁面代碼
import('./home')
  .then(module => {
    // 模塊加載完成后的操作
  })
  .catch(error => {
    // 模塊加載失敗的處理
  });

// 加載about頁面代碼
import('./about')
  .then(module => {
    // 模塊加載完成后的操作
  })
  .catch(error => {
    // 模塊加載失敗的處理
  });

// 加載contact頁面代碼
import('./contact')
  .then(module => {
    // 模塊加載完成后的操作
  })
  .catch(error => {
    // 模塊加載失敗的處理
  });

通過按需加載，我們可以提高頁面加載速度和用戶體驗。只有在需要時才會加載代碼，這可以減少初始加載時間和帶寬消耗。

五、按需加載eslint校驗報錯解決方案

如圖：

在編譯時，eslint會校驗import語法

解決方案1：

1. 下載

npm i eslint-plugin-import -D

2. 配置.eslintrc.js

plugins: [“import”]

• eslintrc.js

module.exports = {
 // 繼承 Eslint 規(guī)則
 extends: ["eslint:recommended"],
 env: {
   node: true, // 啟用node中全局變量
   browser: true, // 啟用瀏覽器中全局變量
 },
 plugins: ["import"], // 解決動態(tài)導入import語法報錯問題 --> 實際使用eslint-plugin-import的規(guī)則解決的
 parserOptions: {
   ecmaVersion: 6,
   sourceType: "module",
 },
 rules: {
   "no-var": 2, // 不能使用 var 定義變量
 },
};

解決方案2：
可以在package.json文件中加上如下配置

• package.json

"eslintConfig": {
    "parser": "babel-eslint",// 解析器，默認使用Espree
    "parserOptions": {
      "sourceType": "module", // 指定來源的類型，"script" (默認) 或 "module"（如果你的代碼是 ECMAScript 模塊)
      "allowImportExportEverywhere": true // 不限制eslint對import使用位置
    }
  },

我后面更改打包文件名時報了個錯,在這里記錄一下

這個就是webpack版本不匹配導致的，我現(xiàn)在的版本是5.85.1
然后我降到5.72.0就好了