書籍完整目錄

2.5 webpack 進階

• 配置分離

• code splitting 異步加載

• 理解 webpack chunk

• webpack 調試

2.5.1 配置分離

在大型項目中，可能 webpack.config.js 會變得越來越臃腫，這個時候可以利用做 webpack-merge 插件。將配置定義在一個目錄下面的不同文件中，然後通過 webpack-merge 來合併成最終的配置。

webpack-merge 詳見 https://www.npmjs.com/package/webpack-merge

2.5.2 code splitting 異步加載

代碼分割不僅僅是提取業務的公共代碼，更應該關注的是實現代碼的按需加載。 通過在模塊中定義 split point ，webpack 會在打包的時候自動的分割代碼塊。定義 split point 的方式有兩種

CommonJs 方式

require.ensure 方法：

/**
 * @param dependencies [Array] 模塊依賴的數組
 * @param callback [Function]
 */
require.ensure(dependencies, callback)

eg:
// 模塊 index.js

/**
 * [description]
 * @param  {[type]} ) { const      async [description]
 * @return {[type]}   [description]
 */
require.ensure(['./async'], function() {
    const async = require('./async');
    console.log(async.default)
});

// 模塊 async.js

export default {
    a: 1
}

webpack 打包過後會生成三個文件

index.js 1.1.js vendor.common.js

index.js 的內容為

webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    'use strict';
    __webpack_require__.e/* nsure */(1, function () {
      var async = __webpack_require__(1);
      console.log(async.default);
    });

/***/ }
]);
//# sourceMappingURL=home.js.map

1.1.js 的內容為

webpackJsonp([1],[
/* 0 */,
/* 1 */
/***/ function(module, exports) {

    "use strict";
    
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    /**
     * async module
     */
    
    exports.default = {
      a: 1
    };

/***/ }
]);
//# sourceMappingURL=1.1.js.map

webpackJsonp 方法定義在 vendor.bundle.js 中:

window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, callbacks = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId])
/******/                callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            modules[moduleId] = moreModules[moduleId];
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/        while(callbacks.length)
/******/            callbacks.shift().call(null, __webpack_require__);
/******/        if(moreModules[0]) {
/******/            installedModules[0] = 0;
/******/            return __webpack_require__(0);
/******/        }
/******/    };

所以在 html 中應該先加載 vendor.bundle.js

<script src="js/vendor.bundle.js"></script>
<script src="js/index.js"></script>

在使用異步加載的時候需要注意一下兩點：

1. 配置 output.publicPath: publicPath 為腳本在服務器中的文字，只有定義了 publicPath 才能通過 webpackJsonp 獲取；

2. 是對於異步的 CommonJs 模塊引入只能通過 require 的方式引用，不能通過 Es6 import 的方式引入；

AMD 方式

AMD 的方式也可以實現異步加載，這和使用 require.js 的使用方式基本相同，在定義模塊的時候需要按照 AMD 的規範來定義

/**
 * @param dependencies [Array] 模塊依賴
 * @param callback [Function]
 */
require(dependencies, callback)

eg:

// 定義模塊
define('modula-a', ['module-c'], function(c) {
    //
    return ...
})

// 依賴模塊
require(["module-a", "module-b"], function(a, b) {
    console.log(a, b);
});

這時候的 require 實現是異步的方式，只有依賴的模塊加載完成並執行回調，才會執行模塊的 callback，依賴模塊的回調結果會作為參數傳入 a, b 中。

2.5.3 代碼塊 Chunk

Chunk 是什麼？

webpack 中 Chunk 實際上就是輸出的 .js 文件，可能包含多個模塊，主要的作用是為了優化異步加載。

Chunk 包含了哪些內容？

對於同步的情況，一個 Chunk 會遞歸的把模塊中所有的依賴都加入到 Chunk 中。

對於異步的情況，在每一個 split point 上所有依賴的模塊會打包進一個新的 chunk，和同步一樣，依賴也是遞歸的，如果子模塊依賴其他模塊也會加入到 chunk 中，依賴的回調函數中 require 的其他模塊也會打包進 chunk 中，以下公式表示 chunk 內容：

chunk content = recursive(ensure 依賴) + recursive(callback 依賴)

Chunk 分類

Entry Chunk

入口代碼塊包含了 webpack 運行時需要的一些函數，如 webpackJsonp, __webpack_require__ 等以及依賴的一系列模塊。

Normal Chunk

普通代碼塊沒有包含運行時需要的代碼，只包含模塊代碼，其結構有加載方式決定，如基於 CommonJs 異步的方式可能會包含 webpackJsonp 的調用。 The chunk also contains a list of chunk id that it fulfills.

Initial chunk

與入口代碼塊對應的一個概念是入口模塊（module 0），如果入口代碼塊中包含了入口模塊 webpack 會立即執行這個模塊，否則會等待包含入口模塊的代碼塊，包含入口模塊的代碼塊其實就是 initial chunk。 以上面的 CommonJs 異步加載為例:

<!-- 入口 Chunk, 未包含入口模塊 -->
<script src="js/vendor.bundle.js"></script>
<!-- 包含入口模塊的 Initial Chunk，執行入口模塊 -->
<script src="js/index.js"></script>

Commons chunk 與 CommonsChunkPlugin

之前我們已經利用 CommonsChunkPlugin 來分割公共代碼如 react, react-dom 到 vendor.bundle.js 中，這裏介紹相關的原理。

以下面的配置為例

var webpack = require("webpack");
module.exports = {
    entry: { a: "./a", b: "./b" },
    output: { filename: "[name].js" },
    plugins: [ new webpack.optimize.CommonsChunkPlugin("init.js") ]
}

當有多個入口的時候，CommonsChunkPlugin 會把 a，b 模塊公共依賴的模塊抽離出來，並加上 webpack 運行時代碼，形成一個新的代碼塊，這個代碼塊類型為 entry chunk。a,b 兩個入口會形成兩個單獨的代碼塊，這兩個代碼塊為 initial chunk。

在 html 中，可以如下加載:

<!-- entry chunk -->
<script src="init.js"></script>
<!-- inital chunk a -->
<script src="a.js"></script>
<!-- initial chunk b -->
<script src="b.js"></script>

更多 CommonChunkPlugin 的參數參見 https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

require.include

可以使用 require.include 方法，直接引入模塊，如下例子：

require.ensure(["./file"], function(require) {
  require("./file2");
});

// is equal to

require.ensure([], function(require) {
  require.include("./file");
  require("./file2");
});

這個方法可以實現一些分塊的優化，當一個 chunk-parent 可能會異步引用多個 chunk-child 而這些 chunk-child 可能都包含了 moduleA, 那麼可以在 chunk-parent 中 require.include('moduleA') 就可以避免重複加載 moduleA。

給異步 Chunk 命名

根據 split point 生成出來的 chunk 名稱都是數字，可以在 split point 上定義 chunk 名稱：

/**
 * @param chunkName [String] chunk 名稱
 */
require.ensure(dependencies, callBack, chunkName)

也可以在 webpack.config.js 中配置修改 output.chunkName 來修改 chunk 名稱

Chunk 優化

在一些特殊的場景可以利用如下這些插件來完成 Chunk 的優化，

• LimitChunkCountPlugin

• MinChunkSizePlugin

• AggressiveMergingPlugin

調試 webpack

在配置 webpack 的過程中，可以利用 webpack 提供的一些工具和參數來調試。

命令行參數

通過調用

$ webpack [--params,...] 

1. --progress: 能夠看到打包進度

2. --json: 可以將打包結果輸出為 json

3. --display-chunks: 可以看到打包出來的 chunk 信息

更多的參數見 http://webpack.github.io/docs/cli.html#progress

webpack analyse

analyse 地址：https://webpack.github.io/analyse/

可以通過 analyse 網站分析 webpack 的編譯結果，如下圖，可以分析 chunks, modules, Assets 等。