摘要：前言是最引人矚目的特性之一此特性將代碼分離到不同的文件中。功能分析官網(wǎng)上有三種方式實(shí)現(xiàn)入口起點(diǎn)使用選項(xiàng)手動(dòng)分離代碼。防止重復(fù)使用去重和分離。本質(zhì)則是多個(gè)入口的，則在以為入口文件將多入口的切分為按切割文件通過(guò)加載。

code-splitting是webpack最引人矚目的特性之一,此特性將代碼分離到不同的bundle文件中。詳細(xì)介紹官網(wǎng)code-split,這次實(shí)現(xiàn)則在筆者上次文件打包之上做開發(fā)。

官網(wǎng)上有三種方式實(shí)現(xiàn)

入口起點(diǎn)：使用 entry 選項(xiàng)手動(dòng)分離代碼。

防止重復(fù)：使用 CommonsChunkPlugin 去重和分離 chunk。

動(dòng)態(tài)導(dǎo)入：通過(guò)模塊的內(nèi)聯(lián)函數(shù)調(diào)用來(lái)分離代碼。

1本質(zhì)則是多個(gè)入口的chunk，2則在以common.js為入口文件,將多入口的chunk切分為按切割文件,通過(guò)jsonp加載。在這里筆者則介紹最為復(fù)雜的3的實(shí)現(xiàn),

對(duì)于webpack 的切割文件的引入本質(zhì)就是jsonp,動(dòng)態(tài)引入一個(gè)約定好格式的js,并運(yùn)行。

__webpack_require__.e = function requireEnsure(chunkId) {
....
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
    head.appendChild(script);
....
}

切割文件去除注釋如下:

webpackJsonp([1],[function(){},function(){}])

而在入口文件的webpackJsonpCallback函數(shù)內(nèi),則是將切割的文件包含的modules依次放入存儲(chǔ)在modules內(nèi)

function webpackJsonpCallback(chunkIds, moreModules){
....
for(moduleId in moreModules) {
             if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
                 modules[moduleId] = moreModules[moduleId];
             }
         }
}     
....    

所以實(shí)現(xiàn)以上功能需求如下:

parse模塊:定位切割點(diǎn)并組裝異步加載文件所需要的依賴。

chunks模塊:各個(gè)chunk包含module模塊的集合,通過(guò)文件樹里面模塊的依賴關(guān)系生成。

writeChunks模塊:根據(jù)chunks,通過(guò)文件流寫入文件。

例子

require("d");

function a() {
    require.ensure(["./a"], function () {
        require("c");
    });
}

require.ensure(["./b"], function () {
    require("./m");
});

require("./e");

實(shí)現(xiàn)思路:

通過(guò)遞歸,以及文件樹的特征定位到require.ensure

將arguments第一個(gè)參數(shù)的數(shù)組,第二個(gè)參數(shù)的函數(shù)內(nèi)遞歸搜索require,存入數(shù)組asyncs內(nèi),并遞歸下去

數(shù)據(jù)結(jié)構(gòu)如下:

{
    filename: "/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/main.js",
    id: 0,
    requires: [{
            name: "d",
            range: [8, 11],
            id: 1
        }],
    rangeRequires: [[0, 7]],
    asyncs: [{
            requires: [{
                    name: "./a",
                    id: 2
                }, {
                    name: "c",
                    range: [88, 91],
                    id: 3
                }],
            asyncs: [],
            rangeRequires: [80, 87],
            ensureRequires: [34, 58]
        },
        {
            requires: [{
                    name: "./b",
                    id: 4
                }, {
                    name: "./m",
                    range: [156, 161],
                    id: 5
                }],
            asyncs: [],
            rangeRequires: [148, 155],
            ensureRequires: [106, 130]
        }],
}

由于各個(gè)依賴文件的源碼都包含在modlues內(nèi)，所以chunks包含的是具體各個(gè)切割文件所包需module的moduleId。

實(shí)現(xiàn)思路:

通過(guò)入口mainPath 找到modules的入口mainModule

將mainModule 的requires遍歷,將值歸入本chunk的modules內(nèi),將asyncs遍歷,依次新建chunk,并關(guān)聯(lián)父chunk，以上兩個(gè)依次遞歸遍歷。

最終生成完了之后,將各個(gè)非根節(jié)點(diǎn)的chunk遍歷，將依賴的modules遍歷對(duì)比父節(jié)點(diǎn)的chunk,如有重復(fù)標(biāo)記"in-parent"

數(shù)據(jù)結(jié)構(gòu)如下

{ "0": 
   { id: 0,
     modules: { "0": "include", "1": "include", "2": "include" } },
  "1": 
   { id: 1,
     modules: 
      { "1": "in-parent",
        "3": "include",
        "4": "include",
        "5": "include",
        "6": "include" },
     parentId: 0 },
  "2": 
   { id: 2,
     modules: { "5": "include", "6": "include" },
     parentId: 0 
     }
}

實(shí)現(xiàn)思路:

判斷是否有多個(gè)chunk,來(lái)區(qū)分引入的模版。如果chunks的個(gè)數(shù)超過(guò)1，入口chunk則加載包含webpackJsonp,__webpack_require__.e等支持jsonp函數(shù)的模版,未超過(guò)則加載簡(jiǎn)單的僅包含__webpack_require__的模版

區(qū)分入口chunk,入口/非入口chunk加載不同的頭部。

webpackJsonp的入?yún)⒂袃煞N,一種數(shù)組,一種以moduleId為key的對(duì)象。為數(shù)組時(shí)候則需要將以[,,modlue]等方式保證順序

如:

本人的簡(jiǎn)易版webpack實(shí)現(xiàn)simple-webpack

(完)