webpack4系列教程（六）：使用SplitChunksPlugin分割代碼

golden_hamster 發布于2019-08-02 14:06 / 1159人閱讀

摘要：在默認情況下，僅僅影響按需加載的代碼塊，因為更改初始塊會影響文件應包含的腳本標記以運行項目。屬性用來選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。

1.?SplitChunksPlugin的概念

起初，chunks(代碼塊)和導入他們中的模塊通過webpack內部的父子關系圖連接.在webpack3中，通過CommonsChunkPlugin來避免他們之間的依賴重復。而在webpack4中CommonsChunkPlugin被移除，取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk 配置項，下面展示它們將如何工作。

在默認情況下，SplitChunksPlugin 僅僅影響按需加載的代碼塊，因為更改初始塊會影響HTML文件應包含的腳本標記以運行項目。

webpack將根據以下條件自動拆分代碼塊：

會被共享的代碼塊或者 node_mudules 文件夾中的代碼塊

體積大于30KB的代碼塊（在gz壓縮前）

按需加載代碼塊時的并行請求數量不超過5個

加載初始頁面時的并行請求數量不超過3個

舉例1：

// index.js

// 動態加載 a.js
import("./a")

// a.js
import "vue"

// ...

打包之后的結果會創建一個包含 vue 的獨立代碼塊，當包含 a.js 的原始代碼塊被調用時，這個獨立代碼塊會并行請求進來。

?原因：

vue 來自 node_modules 文件夾

vue 體積超過30KB

導入調用時的并行請求數為2

不影響頁面初始加載

我們這樣做的原因是因為，vue代碼并不像你的業務代碼那樣經常變動，把它多帶帶提取出來就可以和你的業務代碼分開緩存，極大的提高效率。

舉例2：

// entry.js

import("./a");
import("./b");

// a.js
import "./helpers"; // helpers is 40kb in size

// ...

// b.js
import "./helpers";
import "./more-helpers"; // more-helpers is also 40kb in size

// ...

結果：將創建一個多帶帶的塊，其中包含./helpers它的所有依賴項。在導入調用時，此塊與原始塊并行加載。

原因：

條件1：helpers 是共享塊

條件2：helpers大于30kb

條件3：導入調用的并行請求數為2

條件4：不影響初始頁面加載時的請求

2.?SplitChunksPlugin的默認配置

以下是SplitChunksPlugin的默認配置：

splitChunks: {
    chunks: "async",
    minSize: 30000, // 模塊的最小體積
    minChunks: 1, // 模塊的最小被引用次數
    maxAsyncRequests: 5, // 按需加載的最大并行請求數
    maxInitialRequests: 3, // 一個入口最大并行請求數
    automaticNameDelimiter: "~", // 文件名的連接符
    name: true,
    cacheGroups: { // 緩存組
        vendors: {
            test: /[/]node_modules[/]/,
            priority: -10
        },
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

緩存組：

緩存組因該是SplitChunksPlugin中最有趣的功能了。在默認設置中，會將 node_mudules 文件夾中的模塊打包進一個叫 vendors的bundle中，所有引用超過兩次的模塊分配到? default bundle 中。更可以通過?priority 來設置優先級。

chunks：

chunks屬性用來選擇分割哪些代碼塊，可選值有："all"（所有代碼塊），"async"（按需加載的代碼塊），"initial"（初始化代碼塊）。

3. 在項目中添加SplitChunksPlugin

為了方便演示，我們先安裝兩個類庫： lodash 和 axios，

npm i lodash axios -S

修改 main.js，引入 lodash 和axios 并調用相應方法：

import Modal from "./components/modal/modal"
import "./assets/style/common.less"
import _ from "lodash"
import axios from "axios"
const App = function () {
  let div = document.createElement("div")
  div.setAttribute("id", "app")
  document.body.appendChild(div)
  let dom = document.getElementById("app")
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: "標題",
    content: "內容",
    footer: "底部"
  })
}
const app = new App()
console.log(_.camelCase("Foo Bar"))
axios.get("aaa")

使用SplitChunksPlugin不需要安裝任何依賴，只需在 webpack.config.js 中的 config對象添加 optimization 屬性：

optimization: {
    splitChunks: {
      chunks: "initial",
      automaticNameDelimiter: ".",
      cacheGroups: {
        vendors: {
          test: /[/]node_modules[/]/,
          priority: 1
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `manifest.${entrypoint.name}`
    }
  }

配置 runtimeChunk 會給每個入口添加一個只包含runtime的額外的代碼塊，name 的值也可以是字符串，不過這樣就會給每個入口添加相同的 runtime，配置為函數時，返回當前的entry對象，即可分入口設置不同的runtime。

我們再安裝一個?webpack-bundle-analyzer，這個插件會清晰的展示出打包后的各個bundle所依賴的模塊：

npm i webpack-bundle-analyzer -D

引入：

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

使用，在plugins數組中添加即可：

new BundleAnalyzerPlugin()

打包之后：

各個模塊依賴清晰可見，打開 dist/index.html可見我們的代碼順利運行：

以上就是SplitChunksPlugin的基本用法，更多高級的配置大家可以繼續鉆研（比如多入口應用）。

GPU云服務器云服務器 webpack4教程 linux系列教程云服務器建站教程系列 SplitChunksPlugin

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53576.html

webpack4系列教程（六）：使用SplitChunksPlugin分割代碼

摘要：在默認情況下，僅僅影響按需加載的代碼塊，因為更改初始塊會影響文件應包含的腳本標記以運行項目。屬性用來選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。 1.?SplitChunksPlugin的概念起初，chunks(代碼塊)和導入他們中的模塊通過webpack內部的父子關系圖連接.在webpack3中，通過CommonsChunkPlugin來避免他們之間的依...

cocopeak 2019-08-23 14:42 評論0 收藏0
webpack4系列教程（十）：總結

摘要：傳送門系列教程一初識系列教程二創建項目，打包第一個文件系列教程三自動生成項目中的文件系列教程四處理項目中的資源文件一系列教程五處理項目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發環境和生產環境在前端開發日益復雜的今天，我們需要一個工具來幫助我們管理項目資源，打包、編譯、預處理、后處理等等。webpack的出現無疑是前端開發者的福音，我的博文只...

hqman 2019-08-26 13:29 評論0 收藏0
webpack-demos：全網最貼心webpack系列教程和配套代碼

摘要：全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節，每節都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網最貼心 webpack 系列教程和配套代碼歡迎關注個人技術博客：godbmw.com。每周 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...

LMou 2019-08-23 12:25 評論0 收藏0
webpack4 系列教程(六): 處理SCSS

摘要：只需要在處理的配置上增加編譯的即可。了解更多處理的內容本節課源碼所有課程源碼教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步原文地址系列教程六處理。根據規則放在最后的首先被執行。這節課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。了解更多處理css的內容 >>> >>> 本節課源碼 >>> 所有課程源碼教程所示圖片使用的是...

馬龍駒 2019-08-23 11:33 評論0 收藏0
webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

摘要：本節課講解打包單頁應用過程中的代碼分割和代碼懶加載。不同于多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過配置來實現的，而是通過的寫法和內置函數實現的。個人網站原文鏈接系列教程四單頁面解決方案代碼分割和懶加載本節課講解webpack4打包單頁應用過程中的代碼分割和代碼懶加載。不同于多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實現的，而是通過...

jackwang 2019-08-26 12:14 評論0 收藏0