国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

cocopeak / 1949人閱讀

摘要：在默認(rèn)情況下，僅僅影響按需加載的代碼塊，因?yàn)楦某跏級(jí)K會(huì)影響文件應(yīng)包含的腳本標(biāo)記以運(yùn)行項(xiàng)目。屬性用來選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。

1.?SplitChunksPlugin的概念

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

在默認(rèn)情況下，SplitChunksPlugin 僅僅影響按需加載的代碼塊，因?yàn)楦某跏級(jí)K會(huì)影響HTML文件應(yīng)包含的腳本標(biāo)記以運(yùn)行項(xiàng)目。

webpack將根據(jù)以下條件自動(dòng)拆分代碼塊：

會(huì)被共享的代碼塊或者 node_mudules 文件夾中的代碼塊

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

按需加載代碼塊時(shí)的并行請求數(shù)量不超過5個(gè)

加載初始頁面時(shí)的并行請求數(shù)量不超過3個(gè)

舉例1： 
// index.js

// 動(dòng)態(tài)加載 a.js
import("./a")

// a.js
import "vue"

// ...

打包之后的結(jié)果會(huì)創(chuàng)建一個(gè)包含 vue 的獨(dú)立代碼塊，當(dāng)包含 a.js 的原始代碼塊被調(diào)用時(shí)，這個(gè)獨(dú)立代碼塊會(huì)并行請求進(jìn)來。

?原因：

vue 來自 node_modules 文件夾

vue 體積超過30KB

導(dǎo)入調(diào)用時(shí)的并行請求數(shù)為2

不影響頁面初始加載

我們這樣做的原因是因?yàn)?，vue代碼并不像你的業(yè)務(wù)代碼那樣經(jīng)常變動(dòng)，把它多帶帶提取出來就可以和你的業(yè)務(wù)代碼分開緩存，極大的提高效率。

舉例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

// ...

結(jié)果：將創(chuàng)建一個(gè)多帶帶的塊，其中包含./helpers它的所有依賴項(xiàng)。在導(dǎo)入調(diào)用時(shí)，此塊與原始?jí)K并行加載。

原因：

條件1：helpers 是共享塊

條件2：helpers大于30kb

條件3：導(dǎo)入調(diào)用的并行請求數(shù)為2

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

2.?SplitChunksPlugin的默認(rèn)配置

以下是SplitChunksPlugin的默認(rèn)配置：

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

緩存組：

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

chunks：

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

3. 在項(xiàng)目中添加SplitChunksPlugin

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

npm i lodash axios -S

修改 main.js，引入 lodash 和axios 并調(diào)用相應(yīng)方法：

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: "標(biāo)題",
    content: "內(nèi)容",
    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 會(huì)給每個(gè)入口添加一個(gè)只包含runtime的額外的代碼塊，name 的值也可以是字符串，不過這樣就會(huì)給每個(gè)入口添加相同的 runtime，配置為函數(shù)時(shí)，返回當(dāng)前的entry對象，即可分入口設(shè)置不同的runtime。

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

npm i webpack-bundle-analyzer -D

引入：

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

使用，在plugins數(shù)組中添加即可：

new BundleAnalyzerPlugin()

打包之后：

?

?

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

?

以上就是SplitChunksPlugin的基本用法，更多高級(jí)的配置大家可以繼續(xù)鉆研（比如多入口應(yīng)用）。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101024.html

相關(guān)文章

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

    摘要：在默認(rèn)情況下，僅僅影響按需加載的代碼塊，因?yàn)楦某跏級(jí)K會(huì)影響文件應(yīng)包含的腳本標(biāo)記以運(yùn)行項(xiàng)目。屬性用來選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。 1.?SplitChunksPlugin的概念 起初，chunks(代碼塊)和導(dǎo)入他們中的模塊通過webpack內(nèi)部的父子關(guān)系圖連接.在webpack3中，通過CommonsChunkPlugin來避免他們之間的依...

    golden_hamster 評(píng)論0 收藏0

  • webpack4系列教程（十）：總結(jié)

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

    hqman 評(píng)論0 收藏0

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

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

    LMou 評(píng)論0 收藏0

  • webpack4 系列教程(六): 處理SCSS

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

    馬龍駒 評(píng)論0 收藏0

  • webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

    摘要：本節(jié)課講解打包單頁應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁面應(yīng)用的提取公共代碼，單頁面的代碼分割和懶加載不是通過配置來實(shí)現(xiàn)的，而是通過的寫法和內(nèi)置函數(shù)實(shí)現(xiàn)的。個(gè)人網(wǎng)站原文鏈接系列教程四單頁面解決方案代碼分割和懶加載 本節(jié)課講解webpack4打包單頁應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁面應(yīng)用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實(shí)現(xiàn)的，而是通過...

    jackwang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<