一、 什么是code split

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

二、code split 打包多入口文件

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

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

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

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

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

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

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

最終，我們的應(yīng)用程序會(huì)被分成多個(gè)小的JavaScript文件，例如：

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

這樣可以有效地縮短頁面加載時(shí)間和提高應(yīng)用程序的性能。

三、code split 提取公共代碼

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

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

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

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

然后，我們可以在每個(gè)入口文件中使用Webpack的動(dòng)態(tài)導(dǎo)入技術(shù)來加載共享模塊。這里，我們使用import()函數(shù)來導(dǎo)入一個(gè)包含公共代碼的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選項(xiàng)來給加載的公共代碼 chunk 命名（這里命名為 common）。這個(gè)命名選項(xiàng)對(duì)代碼拆分起著重要的作用，因?yàn)樗沟?code>Webpack可以創(chuàng)建一個(gè)獨(dú)立的chunk包，其中包含所有的公共模塊。

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

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

在這里，我們配置了Webpack的輸出路徑和文件名，使用[name]變量來指定Chunk的名稱。這意味著，生成的Chunk文件分別為home.common.js和user.common.js（如果我們?cè)谥暗拇a中使用了不同的名稱，則Chunk文件的名稱也相應(yīng)發(fā)生更改）。

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

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

Webpack的Code Split技術(shù)可以將一個(gè)大型的應(yīng)用程序代碼拆分成更小的代碼塊，以便按需加載。這樣可以提高應(yīng)用程序的性能和用戶體驗(yàn)，因?yàn)橹挥性谛枰獣r(shí)才會(huì)加載所需的代碼。以下是實(shí)現(xiàn)按需加載的步驟：

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

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

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

2. 使用webpack的splitChunks配置項(xiàng)

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

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

3. 在應(yīng)用程序中按需加載代碼

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

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

舉例說明：

假設(shè)我們有一個(gè)應(yīng)用程序，其中包含三個(gè)頁面，每個(gè)頁面都有自己的代碼。我們可以將代碼拆分成三個(gè)代碼塊，以便按需加載。每個(gè)頁面的代碼可以使用動(dòng)態(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)在，在我們的應(yīng)用程序中，可以使用動(dòng)態(tài)import語法來按需加載每個(gè)頁面的代碼。

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

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

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

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

五、按需加載eslint校驗(yàn)報(bào)錯(cuò)解決方案

如圖：

在編譯時(shí)，eslint會(huì)校驗(yàn)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"], // 解決動(dòng)態(tài)導(dǎo)入import語法報(bào)錯(cuò)問題 --> 實(shí)際使用eslint-plugin-import的規(guī)則解決的
 parserOptions: {
   ecmaVersion: 6,
   sourceType: "module",
 },
 rules: {
   "no-var": 2, // 不能使用 var 定義變量
 },
};

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

• package.json

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

我后面更改打包文件名時(shí)報(bào)了個(gè)錯(cuò),在這里記錄一下

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