webpack代碼分離優化的示例分析

這篇文章主要介紹了webpack代碼分離優化的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

分離代碼文件

在此之前，首先要知道經常配置的 output 中有關 filename 和 chunkFilename 的區別；簡單來說在 entry 定義的入口文件走的就是 filename 配置項，在入口文件內部引入的通常情況下是 chunk，走 chunkFilename 的配置

所以很多時候分離代碼文件就是將不同的 chunk 分離開來，生產環境中有利于瀏覽器緩存，加快二次訪問的速度

代碼分離的時候，optimization 中配置的 splitChunks 默認就是 async，默認對異步代碼進行分離；所以通常情況下能用異步的用異步 import；配合 prefetching 和 preloading 能夠產生很好的效果

filename 和 chunkFilename 的區別

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

舉個例子

如果入口文件是 main.js

那么打包后生成的文件是 main.js

如果 main.js 中引入了其他模塊，比如引入了 lodash 那么可能會生成一個名為 lodash.chunk.js 文件

基本概念了解了，接下來開始對 js 和 css 文件進行分離的操作：

js 代碼分離

js 代碼的分離操作，首先要考慮的就是對異步代碼的分離。這里使用 dynamicImport

dynamicImport

可以使用 magic comment 來修改動態 import 導出的 chunkname，語法規則如下：

import('/* webpackChunkName: "lodash" */' 'lodash').then(//...)

如果需要使用這種注釋的寫法，應該安裝模塊 @babel/plugin-syntax-dynamic-import，并在 babelrc 中引入這個插件，使用方法很簡單這里不多說了

splitChunks

splitChunk 的相關配置參數

建議將公共使用的第三方類庫顯式地配置為公共的部分，而不是 webpack 自己去判斷處理

• chunks: 表示顯示塊的范圍，有三個可選值：initial(初始塊)、async(按需加載塊)、all(全部塊)，默認為all;

• minSize: 表示在壓縮前的最小模塊大小，默認為0；

• minChunks: 表示被引用次數，默認為1；

• maxAsyncRequests: 最大的按需(異步)加載次數，默認為1；

• maxInitialRequests: 最大的初始化加載次數，默認為1；

• name: 拆分出來塊的名字(Chunk Names)，默認由塊名和hash值自動生成；

• cacheGroups: 緩存組。

緩存組中還有其他幾個參數：

• priority: 表示緩存的優先級；

• test: 緩存組的規則，表示符合條件的的放入當前緩存組，值可以是function、boolean、string、RegExp，默認為空；

• reuseExistingChunk: 表示可以使用已經存在的塊，即如果滿足條件的塊已經存在就使用已有的，不再創建一個新的塊。

webpack4——SplitChunksPlugin使用指南

module.exports = {
 entry: {
 vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方類庫
 },
 optimization: {
 splitChunks: {
  cacheGroups: {
  vendor: {
   chunks: "initial",
   test: "vendor",
   name: "vendor", // 使用 vendor 入口作為公共部分
   enforce: true,
  },
  },
 },
 },
 // ... 其他配置
}

或者：

optimization: {
 splitChunks: {
  name: true, // 自動處理文件名
  chunks: 'all',
  minChunks: 1, // 至少 import 1 次的即需要打包
  automaticNameDelimiter: '-',
  cacheGroups: {
  vendors: {
   test: /axios|lodash/, // 將這兩個第三方模塊單獨提取打包
   chunks: 'initial',
  }
  }
 }
 },

optimization-splitchunks

chunks 的配置

注意 ??

如果是動態 import，import('/* webpackChunkName: "lodash" */' 'lodash').then() 那么 splitChunks 設置為 async，代碼分離將會起作用。

如果是同步加載 import, import _ from 'lodash' 那么 splitChunks 設置為 async 將不起作用，如果設置為 all，那么還需要配置 cacheGroups

cacheGroups 的配置

vendors 緩存組的配置可以檢測第三方模塊是否在 node_modules 中，如果存在則該 splitChunks 生效，將會分離到 vendors~... 這樣的文件中

配置 filename 則會打包成 [filename] 命名的文件中

runtimeChunk 的作用

這個 runtimeChunk 實際上就是鏈接業務邏輯和第三方類庫之間的關系的 manifest。需要將其提取出來，否則使用 contenthash 的情況下有可能會導致模塊內容沒發生改變的情況下出現 contenthash 多次打包出現不一致的情況（實際上就是存在在業務邏輯和模塊中的 manifest 發生了改變）

// v4版本的 webpack 不用配置，但最好也提取出來
optimization: {
 runtimeChunk: {
 name: 'runtime'
 }
}

reuseExistingChunk:

如果 a 模塊使用了 b，b 模塊又使用了 a；a 被打包到 common.js 中，打包 b 時將直接使用已經打包好的 common.js 中的 a；這就是 reuseExistingChunk 的作用：

default: {
 reuseExistingChunk: true,
 filename: 'common.js'
}

他的含義就是只要其中一個模塊使用了 import $ from 'jquery'，其他文件中就可直接使用 $ 變量，webpack 會自動在打包過程中 import 這個模塊

css 代碼分離

css 部分分離代碼文件 直接使用 extract-text-webpack-plugin 即可

一個 JS 文件，加載頁面時雖然只需要加載一個 JS 文件，但代碼一旦改變，用戶訪問新的頁面時就需要重新加載一個新的 JS 文件。有些情況下，我們只是單獨修改了樣式，這樣也要重新加載整個應用的 JS 文件，相當不劃算。
多個組件共用一部分樣式，如果分離開來，第二個頁面就有了 CSS 文件的緩存，訪問速度自然會加快

MiniCssExtractPlugin

新版本的 webpack 使用這個插件

注意，在引入樣式文件 import './style.css' 的時候，如果配置了 treeshaking，應當在 package.json 中配置：

"sideEffects": [
 "*.css"
]

?? 注意，另外在 vue 中如果有 style 標簽，還需要在 sideEffects 中加入 *.vue 的配置項。不必擔心 vue 中的 script 部分會被 treeShaking 掉。

插件的相關配置

filename 指的是如果該 css 文件會直接被插入 html 中那么走的就是 filename 的配置

plugins: [
 new MiniCssExtractPlugin({
 filename: '[name].css',
 chunkFilename: '[name].chunk.css'
 })
]

既然有分離那就有合并，這里順便提及一下 css 代碼合并

如果有多個入口，想把多個入口引入的樣式文件全部打包到一個地方，那么可以使用 optimization 配置項的 splitChunks，所以這個配置項不僅僅只作用于 js，css 也是可以的：

optimization: {
 splitChuns: {
 cacheGroups: {
  styles: {
  name: 'style', // 將多個入口文件中的樣式文件全部合并打包
  test: /\.css$/,
  chunks: 'all',
  enforce: true
  }
 }
 }
}

css 代碼根據入口分別打包

還可以根據入口的不同，來分別打包 css 文件，文檔已經講的很詳細了，這部分比較簡單可以直接戳文檔 https://webpack.js.org/plugins/mini-css-extract-plugin

感謝你能夠認真閱讀完這篇文章，希望小編分享的“webpack代碼分離優化的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!