本節課講解 打包 單頁應用 過程中的代碼分割和代碼懶載入。不同於多頁面應用的提取公共代碼，單頁面的代碼分割和懶載入不是通過 配置來實現的，而是通過 的寫法和內置函數實現的。 目前 針對此項功能提供 2 種函數： 1. : 引入並且自動執行相關 js 代碼 2. : 引入但需要手動執行相關 js 代碼 ...
本節課講解
webpack4打包單頁應用過程中的代碼分割和代碼懶載入。不同於多頁面應用的提取公共代碼，單頁面的代碼分割和懶載入不是通過webpack配置來實現的，而是通過webpack的寫法和內置函數實現的。
目前webpack針對此項功能提供 2 種函數：
import(): 引入並且自動執行相關 js 代碼require.ensure(): 引入但需要手動執行相關 js 代碼
本文將會進行逐一講解。
1. 準備工作
此次代碼的目錄結構如下：
其中，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 兩個文件中都執行了console.log()語句。之後將會看到import()和require()不同的表現形式：是否會自動執行 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"
}
};同時，關於第三方庫，因為要在page.js中使用lodash，所以，package.json文件配置如下：
{
"devDependencies": {
"webpack": "^4.15.1"
},
"dependencies": {
"lodash": "^4.17.10"
}
}3. import()編寫page.js
我個人是非常推薦import()寫法，因為和 es6 語法看起來很像。除此之外，import()可以通過註釋的方法來指定打包後的 chunk 的名字。
除此之外，相信對vue-router熟悉的朋友應該知道，其官方文檔的路由懶載入的配置也是通過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";命令行中運行webpack，打包結果如下：
我們創建index.html文件，通過<script>標簽引入我們打包結果，需要註意的是：因為是單頁應用，所以只要引用入口文件即可（即是上圖中的page.bundle.js）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./dist/page.bundle.js"></script>
</body>
</html>打開瀏覽器控制台，刷新界面，結果如下圖所示：
圖中圈出的部分，就是說明import()會自動運行subPageA.js和subPageB.js的代碼。
在 NetWork 選項中，我們可以看到，懶載入也成功了：
4. require()編寫page.js
require.ensure()不會自動執行js代碼，請註意註釋：
require.ensure(
["./subPageA.js", "./subPageB.js"], // js文件或者模塊名稱
function() {
var subPageA = require("./subPageA"); // 引入後需要手動執行，控制台才會列印
var subPageB = require("./subPageB");
},
"subPage" // chunkName
);
require.ensure(
["lodash"],
function() {
var _ = require("lodash");
_.join(["1", "2"]);
},
"vendor"
);
export default "page";其實，根據我們編寫的代碼，subPageA.js和subPageB.js共同引用了module.js文件，我們可以將module.js體現抽離出來：
require.include("./module.js"); // 將subPageA和subPageB共用的module.js打包在此page中
// ...
// 再輸入上面那段代碼最終打包後，檢驗和引入方法與import()一致，這裡不再冗贅。
歡迎技術交流，引用請註明出處。
個人網站：Yuan Xin
原文鏈接：webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶載入
