|
一、单入口文件如何打包
/src/single/index.js
index2 = require( util = require(console.log(index2);
console.log(util);
/src/single/index2.js
util = require(= ;
/src/single/util.js
module.exports = ;
/config/webpack.config.single.js
webpack = require( path = require(module.exports =<span style="color: #000000"> {
entry: {
index: [path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../src/single/index.js<span style="color: #800000">'<span style="color: #000000">)]
},output: {
path: path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../dist<span style="color: #800000">'<span style="color: #000000">),filename: <span style="color: #800000">'<span style="color: #800000">[name].[chunkhash:8].js<span style="color: #800000">'<span style="color: #000000">
}
};
运行webpack命令
webpack --config ./config/webpack.config.single.js
得到的单个打包文件/dist/index.35dff1f1.js
(function(modules) {
installedModules =</span><span style="color: #008000">//</span><span style="color: #008000"> The require function模块加载函数</span>
<span style="color: #000000"> function __webpack_require__(moduleId) {
</span><span style="color: #008000">//</span><span style="color: #008000"> Check if module is in cache判断模块是否已经加载过，若加载过直接返回加载的模块</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedModules[moduleId]) {
</span><span style="color: #0000ff">return</span><span style="color: #000000"> installedModules[moduleId].exports;
}
</span><span style="color: #008000">//</span><span style="color: #008000"> Create a new module (and put it into the cache)</span>
<span style="color: #0000ff">var</span> module = installedModules[moduleId] =<span style="color: #000000"> {
i: moduleId,l: </span><span style="color: #0000ff">false</span><span style="color: #000000">,exports: {}
};
</span><span style="color: #008000">//</span><span style="color: #008000"> Execute the module function执行加载函数</span>
<span style="color: #000000"> modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);
</span><span style="color: #008000">//</span><span style="color: #008000"> Flag the module as loaded标记该模块已经加载</span>
module.l = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008000">//</span><span style="color: #008000"> Return the exports of the module</span>
<span style="color: #0000ff">return</span><span style="color: #000000"> module.exports;
}
</span><span style="color: #008000">//</span><span style="color: #008000"> expose the modules object (__webpack_modules__)</span>
__webpack_require__.m =<span style="color: #000000"> modules;
</span><span style="color: #008000">//</span><span style="color: #008000"> expose the module cache</span>
__webpack_require__.c =<span style="color: #000000"> installedModules;
</span><span style="color: #008000">//</span><span style="color: #008000"> define getter function for harmony exports</span>
__webpack_require__.d =<span style="color: #000000"> function(exports,name,getter) {
</span><span style="color: #0000ff">if</span>(!<span style="color: #000000">__webpack_require__.o(exports,name)) {
Object.defineProperty(exports,{
configurable: </span><span style="color: #0000ff">false</span><span style="color: #000000">,enumerable: </span><span style="color: #0000ff">true</span><span style="color: #000000">,</span><span style="color: #0000ff">get</span><span style="color: #000000">: getter
});
}
};
</span><span style="color: #008000">//</span><span style="color: #008000"> getDefaultExport function for compatibility with non-harmony modules</span>
__webpack_require__.n =<span style="color: #000000"> function(module) {
</span><span style="color: #0000ff">var</span> getter = module && module.__esModule ?<span style="color: #000000">
function getDefault() { </span><span style="color: #0000ff">return</span> module[<span style="color: #800000">'</span><span style="color: #800000">default</span><span style="color: #800000">'</span><span style="color: #000000">]; } :
function getModuleExports() { </span><span style="color: #0000ff">return</span><span style="color: #000000"> module; };
__webpack_require__.d(getter,</span><span style="color: #800000">'</span><span style="color: #800000">a</span><span style="color: #800000">'</span><span style="color: #000000">,getter);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> getter;
};
</span><span style="color: #008000">//</span><span style="color: #008000"> Object.prototype.hasOwnProperty.call</span>
__webpack_require__.o = function(<span style="color: #0000ff">object</span>,property) { <span style="color: #0000ff">return</span> Object.prototype.hasOwnProperty.call(<span style="color: #0000ff">object</span><span style="color: #000000">,property); };
</span><span style="color: #008000">//</span><span style="color: #008000"> __webpack_public_path__</span>
__webpack_require__.p = <span style="color: #800000">""</span><span style="color: #000000">;
</span><span style="color: #008000">//</span><span style="color: #008000"> Load entry module and return exports</span>
<span style="color: #0000ff">return</span> __webpack_require__(__webpack_require__.s = <span style="color: #800080">1</span><span style="color: #000000">);
})([
<span style="color: #008000">/<span style="color: #008000"> 0 <span style="color: #008000">/<span style="color: #000000">
(function(module,exports) {
module.exports = <span style="color: #800000">"<span style="color: #800000">Hello World<span style="color: #800000">"<span style="color: #000000">;
}),<span style="color: #008000">/<span style="color: #008000"> 1 <span style="color: #008000">/<span style="color: #000000">
(function(module,exports,__webpack_require__) {
module.exports = __webpack_require__(<span style="color: #800080">2<span style="color: #000000">);
}),<span style="color: #008000">/<span style="color: #008000"> 2 <span style="color: #008000">/<span style="color: #000000">
(function(module,__webpack_require__) {
<span style="color: #0000ff">var index2 = webpack_require(<span style="color: #800080">3<span style="color: #000000">);
<span style="color: #0000ff">var util = webpack_require(<span style="color: #800080">0<span style="color: #000000">);
console.log(index2);
console.log(util);
}),<span style="color: #008000">/<span style="color: #008000"> 3 <span style="color: #008000">/<span style="color: #000000">
(function(module,__webpack_require__) {
<span style="color: #0000ff">var util = __webpack_require__(<span style="color: #800080">0<span style="color: #000000">);
console.log(util);
module.exports = <span style="color: #800000">"<span style="color: #800000">index 2<span style="color: #800000">"<span style="color: #000000">;
}) ]);
- 首先 webpack 将所有模块(可以简单理解成文件)包裹于一个函数中，并传入默认参数，这里有三个文件再加上一个入口模块一共四个模块，将它们放入一个数组中，取名为 modules，并通过数组的下标来作为 moduleId。
- 将 modules 传入一个自执行函数中，自执行函数中包含一个 installedModules 已经加载过的模块和一个模块加载函数，最后加载入口模块并返回。
__webpack_require__模块加载，先判断 installedModules 是否已加载，加载过了就直接返回 exports 数据，没有加载过该模块就通过modules[moduleId].call(module.exports,__webpack_require__)执行模块并且将 module.exports 给返回。
上述过程还是比较简单的，但有些点需要注意：
1、每个模块只会加载一次，所以重复加载的模块只会执行一次，加载过的模块会放到 installedModules，下次需要需要该模块的值就直接从里面拿了。
2、模块的id 直接通过数组下标去一一对应的，这样能保证简单且唯一，通过其它方式比如文件名或文件路径的方式就比较麻烦，因为文件名可能出现重名，不唯一，文件路径则会增大文件体积，并且将路径暴露给前端，不够安全。
3、modules[moduleId].call(module.exports,__webpack_require__)保证了模块加载时 this 的指向 module.exports 并且传入默认参数
二、多入口文件如何进行代码切割
我们在开发一些较复杂的应用时，如果没有对代码进行切割，将第三方库(jQuery)或框架(React) 和业务代码全部打包在一起，就会导致用户访问页面速度很慢，不能有效利用缓存。
utilA = require( utilB = require(<span style="color: #008000">//<span style="color: #008000"> /src/multiple/pageB.js
<span style="color: #0000ff">const utilB = require(<span style="color: #800000">'<span style="color: #800000">./js/utilB<span style="color: #800000">'<span style="color: #000000">);
console.log(utilB);
<span style="color: #008000">//<span style="color: #008000"> 异步加载文件，类似于 import()
<span style="color: #0000ff">const utilC = () => require.ensure([<span style="color: #800000">'<span style="color: #800000">./js/utilC<span style="color: #800000">'<span style="color: #000000">],function(require) {
console.log(require(<span style="color: #800000">'<span style="color: #800000">./js/utilC<span style="color: #800000">'<span style="color: #000000">))
});
utilC();
<span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilA.js 可类比于公共库，如 jQuery
module.exports = <span style="color: #800000">"<span style="color: #800000">util A<span style="color: #800000">"<span style="color: #000000">;
<span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilB.js
module.exports = <span style="color: #800000">'<span style="color: #800000">util B<span style="color: #800000">'<span style="color: #000000">;
<span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilC.js
module.exports = <span style="color: #800000">"<span style="color: #800000">util C<span style="color: #800000">";
这里我们定义了两个入口 pageA 和 pageB 和三个库 util，我们希望代码切割做到：
- 因为两入口都是用到了 utilB，我们希望把它抽离成单独文件，并且当用户访问 pageA 和 pageB 的时候都能去加载 utilB 这个公共模块，而不是存在于各自的入口文件中。
- pageB 中 utilC 不是页面一开始加载时候就需要的内容，假如 utilC 很大，我们不希望页面加载时就直接加载 utilC，而是当用户达到某种条件(如：点击按钮)才去异步加载 utilC，这时候我们需要将 utilC 抽离成单独文件，当用户需要的时候再去加载该文件。
那么 webpack 需要怎么配置呢？
webpack = require( path = require(module.exports =<span style="color: #000000"> {
entry: {
pageA: [path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../src/multiple/pageA.js<span style="color: #800000">'<span style="color: #000000">)],pageB: path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../src/multiple/pageB.js<span style="color: #800000">'<span style="color: #000000">),},filename: <span style="color: #800000">'<span style="color: #800000">[name].[chunkhash:8].js<span style="color: #800000">'<span style="color: #000000">,plugins: [
<span style="color: #0000ff">new<span style="color: #000000"> webpack.optimize.CommonsChunkPlugin({
name: <span style="color: #800000">'<span style="color: #800000">vendor<span style="color: #800000">'<span style="color: #000000">,minChunks: <span style="color: #800080">2<span style="color: #000000">,}),<span style="color: #0000ff">new<span style="color: #000000"> webpack.optimize.CommonsChunkPlugin({
name: <span style="color: #800000">'<span style="color: #800000">manifest<span style="color: #800000">'<span style="color: #000000">,chunks: [<span style="color: #800000">'<span style="color: #800000">vendor<span style="color: #800000">'<span style="color: #000000">]
})
]
}
单单配置多 entry 是不够的，这样只会生成两个 bundle 文件，将 pageA 和 pageB 所需要的内容全部放入，跟单入口文件并没有区别，要做到代码切割，我们需要借助 webpack 内置的插件 CommonsChunkPlugin。
首先 webpack 执行存在一部分运行时代码，即一部分初始化的工作，就像之前单文件中的__webpack_require__，这部分代码需要加载于所有文件之前，相当于初始化工作，少了这部分初始化代码，后面加载过来的代码就无法识别并工作了。
这段代码的含义是，在这些入口文件中，找到那些引用两次的模块(如：utilB)，帮我抽离成一个叫 vendor 文件，此时那部分初始化工作的代码会被抽离到 vendor 文件中。
})
这段代码的含义是在 vendor 文件中帮我把初始化代码抽离到 mainifest 文件中，此时 vendor 文件中就只剩下 utilB 这个模块了。你可能会好奇为什么要这么做？
因为这样可以给 vendor 生成稳定的 hash 值，每次修改业务代码(pageA)，这段初始化时代码就会发生变化，那么如果将这段初始化代码放在 vendor 文件中的话，每次都会生成新的 vendor.xxxx.js，这样不利于持久化缓存
另外 webpack 默认会抽离异步加载的代码，这个不需要你做额外的配置，pageB 中异步加载的 utilC 文件会直接抽离为 chunk.xxxx.js 文件。
所以这时候我们页面加载文件的顺序就会变成：
mainifest.xxxx.js
vendor.xxxx.js
pageX.xxxx.js
当 pageB 需要 utilC 时候则异步加载 utilC
执行命令
结果生成了5个文件：异步加载文件utilC.js单独打包成了一个文件0.×××.js,入口pageA,pageB分别打包成文件，pageA和pageB共用模块单独打包成vendor,初始化代码manifest
那么manifest如何做初始化工作呢？
(function(modules) {
parentJsonpFunction = window[] =
moduleId,chunkId,i = ,resolves =(;i < chunkIds.length; i++== (moduleId =(i=; i < executeModules.length; i++= __webpack_require__(__webpack_require__.s = </span><span style="color: #008000">//</span><span style="color: #008000"> The module cache</span>
<span style="color: #0000ff">var</span> installedModules =<span style="color: #000000"> {};
</span><span style="color: #008000">//</span><span style="color: #008000"> objects to store loaded and loading chunks</span>
<span style="color: #0000ff">var</span> installedChunks =<span style="color: #000000"> {
</span><span style="color: #800080">4</span>: <span style="color: #800080">0</span><span style="color: #000000">
};
</span><span style="color: #008000">//</span><span style="color: #008000"> The require function模块加载函数</span>
<span style="color: #000000"> function __webpack_require__(moduleId) {
</span><span style="color: #008000">//</span><span style="color: #008000"> Check if module is in cache</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedModules[moduleId]) {
</span><span style="color: #0000ff">return</span><span style="color: #000000"> installedModules[moduleId].exports;
}
</span><span style="color: #008000">//</span><span style="color: #008000"> Create a new module (and put it into the cache)</span>
<span style="color: #0000ff">var</span> module = installedModules[moduleId] =<span style="color: #000000"> {
i: moduleId,exports: {}
};
</span><span style="color: #008000">//</span><span style="color: #008000"> Execute the module function</span>
<span style="color: #000000"> modules[moduleId].call(module.exports,__webpack_require__);
</span><span style="color: #008000">//</span><span style="color: #008000"> Flag the module as loaded</span>
module.l = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008000">//</span><span style="color: #008000"> Return the exports of the module</span>
<span style="color: #0000ff">return</span><span style="color: #000000"> module.exports;
}
</span><span style="color: #008000">//</span><span style="color: #008000"> This file contains only the entry chunk.
</span><span style="color: #008000">//</span><span style="color: #008000"> The chunk loading function for additional chunks</span>
__webpack_require__.e =<span style="color: #000000"> function requireEnsure(chunkId) {
</span><span style="color: #0000ff">var</span> installedChunkData =<span style="color: #000000"> installedChunks[chunkId];
</span><span style="color: #0000ff">if</span>(installedChunkData === <span style="color: #800080">0</span><span style="color: #000000">) {
</span><span style="color: #0000ff">return</span> <span style="color: #0000ff">new</span><span style="color: #000000"> Promise(function(resolve) { resolve(); });
}
</span><span style="color: #008000">//</span><span style="color: #008000"> a Promise means "currently loading".</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedChunkData) {
</span><span style="color: #0000ff">return</span> installedChunkData[<span style="color: #800080">2</span><span style="color: #000000">];
}
</span><span style="color: #008000">//</span><span style="color: #008000"> setup Promise in chunk cache</span>
<span style="color: #0000ff">var</span> promise = <span style="color: #0000ff">new</span><span style="color: #000000"> Promise(function(resolve,reject) {
installedChunkData </span>= installedChunks[chunkId] =<span style="color: #000000"> [resolve,reject];
});
installedChunkData[</span><span style="color: #800080">2</span>] =<span style="color: #000000"> promise;
</span><span style="color: #008000">//</span><span style="color: #008000"> start chunk loading</span>
<span style="color: #0000ff">var</span> head = document.getElementsByTagName(<span style="color: #800000">'</span><span style="color: #800000">head</span><span style="color: #800000">'</span>)[<span style="color: #800080">0</span><span style="color: #000000">];
</span><span style="color: #0000ff">var</span> script = document.createElement(<span style="color: #800000">'</span><span style="color: #800000">script</span><span style="color: #800000">'</span><span style="color: #000000">);
script.type </span>= <span style="color: #800000">"</span><span style="color: #800000">text/javascript</span><span style="color: #800000">"</span><span style="color: #000000">;
script.charset </span>= <span style="color: #800000">'</span><span style="color: #800000">utf-8</span><span style="color: #800000">'</span><span style="color: #000000">;
script.</span><span style="color: #0000ff">async</span> = <span style="color: #0000ff">true</span><span style="color: #000000">;
script.timeout </span>= <span style="color: #800080">120000</span><span style="color: #000000">;
</span><span style="color: #0000ff">if</span><span style="color: #000000"> (__webpack_require__.nc) {
script.setAttribute(</span><span style="color: #800000">"</span><span style="color: #800000">nonce</span><span style="color: #800000">"</span><span style="color: #000000">,__webpack_require__.nc);
}
script.src </span>= __webpack_require__.p + <span style="color: #800000">""</span> + chunkId + <span style="color: #800000">"</span><span style="color: #800000">.</span><span style="color: #800000">"</span> + {<span style="color: #800000">"</span><span style="color: #800000">0</span><span style="color: #800000">"</span>:<span style="color: #800000">"</span><span style="color: #800000">ae9c5f5f</span><span style="color: #800000">"</span>}[chunkId] + <span style="color: #800000">"</span><span style="color: #800000">.js</span><span style="color: #800000">"</span><span style="color: #000000">;
</span><span style="color: #0000ff">var</span> timeout = setTimeout(onScriptComplete,<span style="color: #800080">120000</span><span style="color: #000000">);
script.onerror </span>= script.onload =<span style="color: #000000"> onScriptComplete;
function onScriptComplete() {
</span><span style="color: #008000">//</span><span style="color: #008000"> avoid mem leaks in IE.</span>
script.onerror = script.onload = <span style="color: #0000ff">null</span><span style="color: #000000">;
clearTimeout(timeout);
</span><span style="color: #0000ff">var</span> chunk =<span style="color: #000000"> installedChunks[chunkId];
</span><span style="color: #0000ff">if</span>(chunk !== <span style="color: #800080">0</span><span style="color: #000000">) {
</span><span style="color: #0000ff">if</span><span style="color: #000000">(chunk) {
chunk[</span><span style="color: #800080">1</span>](<span style="color: #0000ff">new</span> Error(<span style="color: #800000">'</span><span style="color: #800000">Loading chunk </span><span style="color: #800000">'</span> + chunkId + <span style="color: #800000">'</span><span style="color: #800000"> failed.</span><span style="color: #800000">'</span><span style="color: #000000">));
}
installedChunks[chunkId] </span>=<span style="color: #000000"> undefined;
}
};
head.appendChild(script);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> promise;
};
</span><span style="color: #008000">//</span><span style="color: #008000"> expose the modules object (__webpack_modules__)</span>
__webpack_require__.m =<span style="color: #000000"> modules;
</span><span style="color: #008000">//</span><span style="color: #008000"> expose the module cache</span>
__webpack_require__.c =<span style="color: #000000"> installedModules;
</span><span style="color: #008000">//</span><span style="color: #008000"> define getter function for harmony exports</span>
__webpack_require__.d =<span style="color: #000000"> function(exports,</span><span style="color: #0000ff">get</span><span style="color: #000000">: getter
});
}
};
</span><span style="color: #008000">//</span><span style="color: #008000"> getDefaultExport function for compatibility with non-harmony modules</span>
__webpack_require__.n =<span style="color: #000000"> function(module) {
</span><span style="color: #0000ff">var</span> getter = module && module.__esModule ?<span style="color: #000000">
function getDefault() { </span><span style="color: #0000ff">return</span> module[<span style="color: #800000">'</span><span style="color: #800000">default</span><span style="color: #800000">'</span><span style="color: #000000">]; } :
function getModuleExports() { </span><span style="color: #0000ff">return</span><span style="color: #000000"> module; };
__webpack_require__.d(getter,getter);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> getter;
};
</span><span style="color: #008000">//</span><span style="color: #008000"> Object.prototype.hasOwnProperty.call</span>
__webpack_require__.o = function(<span style="color: #0000ff">object</span>,property); };
</span><span style="color: #008000">//</span><span style="color: #008000"> __webpack_public_path__</span>
__webpack_require__.p = <span style="color: #800000">""</span><span style="color: #000000">;
</span><span style="color: #008000">//</span><span style="color: #008000"> on error function for async loading</span>
__webpack_require__.oe = function(err) { console.error(err); <span style="color: #0000ff">throw</span><span style="color: #000000"> err; };
})([]);
与单文件内容一致，定义了一个自执行函数，因为它不包含任何模块，所以传入一个空数组。除了定义了__webpack_require__，还另外定义了两个函数用来进行加载模块。
首先讲解代码前需要理解两个概念，分别是 module 和 chunk
- chunk 代表生成后 js 文件，一个 chunkId 对应一个打包好的 js 文件(一共五个)，从这段代码可以看出，manifest 的 chunkId 为 4，并且从代码中还可以看到：0-3 分别对应 异步 utilC,pageA,pageB,vendor 公共模块文件，这也就是我们为什么不能将这段代码放在 vendor 的原因，因为文件的 hash 值会变。内容变了，vendor 生成的 hash 值也就变了。
- module 对应着模块，可以简单理解为打包前每个 js 文件对应一个模块，也就是之前
__webpack_require__加载的模块，同样的使用数组下标作为 moduleId 且是唯一不重复的。
那么为什么要区分 chunk 和 module 呢？
首先使用 installedChunks 来保存每个 chunkId 是否被加载过，如果被加载过，则说明该 chunk 中所包含的模块已经被放到了 modules 中，注意是 modules 而不是 installedModules。我们先来简单看一下 vendor chunk 打包出来的内容。
webpackJsonp([ module.exports = <span style="color: #800000">'<span style="color: #800000">util B<span style="color: #800000">'<span style="color: #000000">;
})
]);
在执行完 manifest 后就会先执行 vendor 文件，结合上面 webpackJsonp 的定义，我们可以知道 [3] 代表 chunkId，当加载到 vendor 文件后，installedChunks[3] 将会被置为 0，这表明 chunk3 已经被加载过了。
webpack如何加载异步脚本：
__webpack_require__.e = installedChunkData =(installedChunkData === </span><span style="color: #008000">//</span><span style="color: #008000"> a Promise means "currently loading".</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedChunkData) {
</span><span style="color: #0000ff">return</span> installedChunkData[<span style="color: #800080">2</span><span style="color: #000000">];
}
</span><span style="color: #008000">//</span><span style="color: #008000"> setup Promise in chunk cache</span>
<span style="color: #0000ff">var</span> promise = <span style="color: #0000ff">new</span><span style="color: #000000"> Promise(function(resolve,<span style="color: #800080">120000</span><span style="color: #000000">);
script.onerror </span>= script.onload =<span style="color: #000000"> onScriptComplete;
function onScriptComplete() {
</span><span style="color: #008000">//</span><span style="color: #008000"> avoid mem leaks in IE.</span>
script.onerror = script.onload = <span style="color: #0000ff">null</span><span style="color: #000000">;
clearTimeout(timeout);
</span><span style="color: #0000ff">var</span> chunk =<span style="color: #000000"> installedChunks[chunkId];
</span><span style="color: #0000ff">if</span>(chunk !== <span style="color: #800080">0</span><span style="color: #000000">) {
</span><span style="color: #0000ff">if</span><span style="color: #000000">(chunk) {
chunk[</span><span style="color: #800080">1</span>](<span style="color: #0000ff">new</span> Error(<span style="color: #800000">'</span><span style="color: #800000">Loading chunk </span><span style="color: #800000">'</span> + chunkId + <span style="color: #800000">'</span><span style="color: #800000"> failed.</span><span style="color: #800000">'</span><span style="color: #000000">));
}
installedChunks[chunkId] </span>=<span style="color: #000000"> undefined;
}
};
head.appendChild(script);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> promise;
};</span></pre>
大致分为三种情况，(已经加载过，正在加载中以及从未加载过)
- 已经加载过该 chunk 文件，那就不用再重新加载该 chunk 了，直接执行回调函数即可，可以理解为假如页面有两种操作需要加载加载异步脚本，但是两个脚本都依赖于公共模块，那么第二次加载的时候发现之前第一次操作已经加载过了该 chunk，则不用再去获取异步脚本了，因为该公共模块已经被执行过了。
- 从未加载过，则动态地去插入 script 脚本去请求 js 文件，这也就为什么取名 webpackJsonpCallback，因为跟 jsonp 的思想很类似，所以这种异步加载脚本在做脚本错误监控时经常出现 Script error，具体原因可以查看我之前写的文章：
- 正在加载中代表该 chunk 文件已经在加载中了，比如说点击按钮触发异步脚本，用户点太快了，连点两次就可能出现这种情况，此时将回调函数放入 installedChunks。
通过 utilC 生成的 chunk 来进行讲解：
webpackJsonp([=
pageB需要异步加载这个chunk:
webpackJsonp([ utilB = __webpack_require__( utilC = () => __webpack_require__.e(,__webpack_require__)).]);
当 pageB 进行某种操作需要加载 utilC 时就会执行__webpack_require__.e(0,callback), 0，代表需要加载的模块 chunkId(utilC)，异步加载 utilC 并将 callback 添加到 installedChunks[0] 中，然后当 utilC 的 chunk 文件加载完毕后，chunkIds 包含 1，发现 installedChunks[0] 是个数组，里面还有之前还未执行的 callback 函数
既然这样，那我就将我自己带来的模块先放到 modules 中，然后再统一执行之前未执行完的 callbacks 函数，这里指的是存放于 installedChunks[1] 中的回调函数 (可能存在多个)，这也就是说明这里的先后顺序：
(moduleId =,__webpack_require__);
webpack2 中会默认加载 OccurrenceOrderPlugin 这个插件，即你不用 plugins 中添加这个配置它也会默认执行，那它有什么用途呢？主要是在 webpack1 中 moduleId 的不确定性导致的，在 webpack1 中 moduleId 取决于引入文件的顺序，这就会导致这个 moduleId 可能会时常发生变化,而 OccurrenceOrderPlugin 插件会按引入次数最多的模块进行排序，引入次数的模块的 moduleId 越小，比如说上面引用的 utilB 模块引用次数为 2(最多)，所以它的 moduleId 为 0。
最后说下在异步加载模块时， webpack2 是基于 Promise 的，所以说如果你要兼容低版本浏览器，需要引入Promise-polyfill，另外为引入请求添加了错误处理。
在 webpack1 的时候，如果由于网络原因当你加载脚本失败后，即使网络恢复了，你再次进行某种操作需要同个 chunk 时候都会无效，主要原因是失败之后没把installedChunks[chunkId] = undefined;导致之后不会再对该 chunk 文件发起异步请求。
而在 webpack2 中，当脚本请求超时了(2min)或者加载失败，会将 installedChunks[chunkId] 清空，当下次重新请求该 chunk 文件会重新加载，提高了页面的容错性
三、webpack2如何做到tree shaking?
什么是 tree shaking，即 webpack 在打包的过程中会将没用的代码进行清除(dead code)。一般 dead code 具有一下的特征：
- 代码不会被执行，不可到达
- 代码执行的结果不会被用到
- 代码只会影响死变量（只写不读）
是不是很神奇，那么需要怎么做才能使 tree shaking 生效呢？
首先，模块引入要基于 ES6 模块机制，不再使用 commonjs 规范，因为 es6 模块的依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，然后清除没用的代码。而 commonjs 的依赖关系是要到运行时候才能确定下来的。
其次，需要开启 UglifyJsPlugin 这个插件对代码进行压缩。
我们先写一个例子来说明：
} ;
import classC ;
<span style="color: #008000">//<span style="color: #008000"> src/es6/js/utilA.js
export <span style="color: #0000ff">const utilA = <span style="color: #800000">'<span style="color: #800000">util A<span style="color: #800000">'<span style="color: #000000">;
export function funcA() {
console.log(<span style="color: #800000">'<span style="color: #800000">func A<span style="color: #800000">'<span style="color: #000000">);
}
<span style="color: #008000">//<span style="color: #008000"> src/es6/js/utilB.js
export <span style="color: #0000ff">default<span style="color: #000000"> function() {
console.log(<span style="color: #800000">'<span style="color: #800000">func B<span style="color: #800000">'<span style="color: #000000">);
}
<span style="color: #0000ff">if(<span style="color: #0000ff">false) { <span style="color: #008000">//<span style="color: #008000"> 被清除
console.log(<span style="color: #800000">'<span style="color: #800000">never use<span style="color: #800000">'<span style="color: #000000">);
}
<span style="color: #0000ff">while(<span style="color: #0000ff">true<span style="color: #000000">) {}
console.log(<span style="color: #800000">'<span style="color: #800000">never use<span style="color: #800000">'<span style="color: #000000">);
<span style="color: #008000">//<span style="color: #008000"> src/es6/js/utilC.js
<span style="color: #0000ff">const classC = function() {} <span style="color: #008000">//<span style="color: #008000"> 类方法不会被清除
classC.prototype.saySomething =<span style="color: #000000"> function() {
console.log(<span style="color: #800000">'<span style="color: #800000">class C<span style="color: #800000">'<span style="color: #000000">);
}
export <span style="color: #0000ff">default classC;
打包的配置也很简单：
webpack = require( path = require(=
对压缩的文件进行分析：
webpackJsonp([,{ value: ! n = e(),e(= n ==]);
引入但是没用的变量，函数都会清除，未执行的代码也会被清除。但是类方法是不会被清除的。因为 webpack 不会区分不了是定义在 classC 的 prototype 还是其它 Array 的 prototype 的，比如 classC 写成下面这样：
classC = a = + (a === == = classC;
webpack 无法保证 prototype 挂载的对象是 classC，这种代码，静态分析是分析不了的，就算能静态分析代码，想要正确完全的分析也比较困难。所以 webpack 干脆不处理类方法，不对类方法进行 tree shaking
更多的 tree shaking 的副作用可以查阅：
四、webpack3如何做到scope hoisting?
scope hoisting，顾名思义就是将模块的作用域提升，在 webpack 中不能将所有所有的模块直接放在同一个作用域下，有以下几个原因：
- 按需加载的模块
- 使用 commonjs 规范的模块
- 被多 entry 共享的模块
在 webpack3 中，这些情况生成的模块不会进行作用域提升，下面我就举个例子来说明：
export utilA = <span style="color: #008000">//<span style="color: #008000"> src/hoist/utilB.js
export <span style="color: #0000ff">const utilB = <span style="color: #800000">'<span style="color: #800000">util B<span style="color: #800000">'<span style="color: #000000">;
export function funcB() {
console.log(<span style="color: #800000">'<span style="color: #800000">func B<span style="color: #800000">'<span style="color: #000000">);
}
<span style="color: #008000">//<span style="color: #008000"> src/hoist/utilC.js
export <span style="color: #0000ff">const utilC = <span style="color: #800000">'<span style="color: #800000">util C<span style="color: #800000">'<span style="color: #000000">;
<span style="color: #008000">//<span style="color: #008000"> src/hoist/pageA.js
import { utilA,funcA } <span style="color: #0000ff">from <span style="color: #800000">'<span style="color: #800000">./utilA<span style="color: #800000">'<span style="color: #000000">;
console.log(utilA);
funcA();
<span style="color: #008000">//<span style="color: #008000"> src/hoist/pageB.js
import { utilA } <span style="color: #0000ff">from <span style="color: #800000">'<span style="color: #800000">./utilA<span style="color: #800000">'<span style="color: #000000">;
import { utilB,funcB } <span style="color: #0000ff">from <span style="color: #800000">'<span style="color: #800000">./utilB<span style="color: #800000">'<span style="color: #000000">;
funcB();
import(<span style="color: #800000">'<span style="color: #800000">./utilC<span style="color: #800000">'<span style="color: #000000">).then(function(utilC) {
console.log(utilC);
})
这个例子比较典型，utilA 被 pageA 和 pageB 所共享，utilB 被 pageB 单独加载，utilC 被 pageB 异步加载。
想要 webpack3 生效，则需要在 plugins 中添加 ModuleConcatenationPlugin。
webpack 配置如下：
webpack = require( path = require(=
运行
webpackJsonp([ utilA = __webpack_require__(
utilB =
().then(__webpack_require__.bind(,]);
通过代码分析，可以得出下面的结论：
- 因为我们配置了共享模块抽离，所以 utilA 被抽出为单独模块，故这部分内容不会进行作用域提升。
- utilB 无牵无挂，被 pageB 单独加载，所以这部分不会生成新的模块，而是直接作用域提升到 pageB 中。
- utilC 被异步加载，需要抽离成单独模块，很明显没办法作用域提升。
转自：https://github.com/happylindz/blog/issues/6 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
