資訊專欄INFORMATION COLUMN
摘要：本節(jié)課講解打包單頁應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁面應(yīng)用的提取公共代碼，單頁面的代碼分割和懶加載不是通過配置來實(shí)現(xiàn)的，而是通過的寫法和內(nèi)置函數(shù)實(shí)現(xiàn)的。個人網(wǎng)站原文鏈接系列教程四單頁面解決方案代碼分割和懶加載
本節(jié)課講解webpack4打包單頁應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁面應(yīng)用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實(shí)現(xiàn)的，而是通過webpack的寫法和內(nèi)置函數(shù)實(shí)現(xiàn)的。
目前webpack針對此項(xiàng)功能提供 2 種函數(shù)：
import(): 引入并且自動執(zhí)行相關(guān) js 代碼
require.ensure(): 引入但需要手動執(zhí)行相關(guān) js 代碼
本文將會進(jìn)行逐一講解。
>>> 本節(jié)課源碼
>>> 所有課程源碼
1. 準(zhǔn)備工作此次代碼的目錄結(jié)構(gòu)如下：
其中，page.js是入口文件,subPageA.js和subPageB.js共同引用module.js。下面，我們按照代碼引用的邏輯，從底向上展示代碼：
module.js:
export default "module";
subPageA.js:
import "./module";
console.log("I"m subPageA");
export default "subPageA";
subPageB.js:
import "./module";
console.log("I"m subPageB");
export default "subPageB";
請注意：subPageA.js 和 subPageB.js 兩個文件中都執(zhí)行了console.log()語句。之后將會看到import()和require()不同的表現(xiàn)形式：是否會自動執(zhí)行 js 的代碼？
2. 編寫配置文件下面編寫webpack配置文件（很簡單）：
const webpack = require("webpack");
const path = require("path");
module.exports = {
entry: {
page: "./src/page.js" //
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
}
};
同時，關(guān)于第三方庫，因?yàn)橐?b>page.js中使用lodash，所以，package.json文件配置如下：
{
"devDependencies": {
"webpack": "^4.15.1"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
3. import()編寫page.js
我個人是非常推薦import()寫法，因?yàn)楹?es6 語法看起來很像。除此之外，import()可以通過注釋的方法來指定打包后的 chunk 的名字。
除此之外，相信對vue-router熟悉的朋友應(yīng)該知道，其官方文檔的路由懶加載的配置也是通過import()來書寫的。
下面，我們將書寫page.js:
import(/* webpackChunkName: "subPageA"*/ "./subPageA").then(function(subPageA) {
console.log(subPageA);
});
import(/* webpackChunkName: "subPageB"*/ "./subPageB").then(function(subPageB) {
console.log(subPageB);
});
import(/* webpackChunkName: "lodash"*/ "lodash").then(function(_) {
console.log(_.join(["1", "2"]));
});
export default "page";
命令行中運(yùn)行webpack，打包結(jié)果如下：
我們創(chuàng)建index.html文件，通過