webpack 學習筆記 03 Code Splitting

時間 2019-11-09

標籤 webpack 學習筆記 code splitting 简体版

原文原文鏈接

Introduction

對於較大的web 應用來講，將全部的代碼文件壓縮成一個文件是不合適的，在部分代碼文件只有特殊狀況下才被須要的狀況下，這無疑是一種浪費。webpack 提供了講代碼文件分塊的能力。
這裏須要注意的是：webpack並非把原來的一個大文件，簡單的進行拆分，而是在這個基礎上，提供了按需加載特定塊的能力。這樣使得應用在最初加載的代碼量能夠儘可能的小。javascript

Defining a split point

AMD 與 CommonJs標準個自定義了按需加載代碼的方式，webpack會將它們識別成分割點。
require.ensure(CommonJs)html

require.ensure(dependencies, callback)

ensure使得咱們可在全部的dependencies項加載完畢後，再執行回調。java

require.ensure(["module-a", "module-b"], function(require) {
    var a = require("module-a");
    // ...
});

ensure僅僅是加載組件，並不會執行，若要執行，須要藉助傳進去的require參數。
require(AMD)webpack

require(dependencies, callback)

與CommonJs式的require處理不一樣，全部的組件經異步獲取到後，會當即執行(以從左至右的順序)。web

require(["module-a", "module-b"], function(a, b) {
    // ...
});

DEMO

讓咱們建立以下三個文件:異步

main.js
firstScript.js
secondScript.js函數

在main.js中，寫入以下代碼：工具

require.ensure(["./firstScript.js"], function(require) {
});

require(["./secondScript.js"], function(require) {
});

爲了測試，咱們給firstScript和secondScript分別在全局對象上掛一個屬性。
firstScript.js測試

window.a = 1;

secondScript.jsui

window.b = 1;

webpack的安裝，配置方面前兩篇博文已有說明，故不贅述。

webpack -w

index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>

訪問webpack 在開發者工具中，咱們能夠看到代碼被分爲了3個塊加載。

而且，在控制檯，拿不到a的值(代碼未執行)，能夠拿到b的值。你們能夠試試。
這樣，在實際的代碼中，咱們能夠到了特定的應用場合按需加載代碼塊。

Chunk content

在[]中的依賴項被組成了新的塊。若是咱們傳入的回調函數中，有一些依賴項，而且這些依賴項是父環境沒有的，webpack也會將它們考慮在內。一塊兒附到新的塊中。

本文完。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。