webpack4 系列教程(四): 單頁面解決方案–程式碼分割和懶載入

godbmw發表於2018-08-17
Web

本節課講解webpack4打包單頁應用過程中的程式碼分割和程式碼懶載入。不同於多頁面應用的提取公共程式碼，單頁面的程式碼分割和懶載入不是通過webpack配置來實現的，而是通過webpack的寫法和內建函式實現的。

目前webpack針對此項功能提供 2 種函式：

  1. import(): 引入並且自動執行相關 js 程式碼
  2. 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，打包結果如下：
import打包結果

我們建立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()一致，這裡不再冗贅。

歡迎技術交流，引用請註明出處。
個人網站：董沅鑫的個人網站
原文連結：webpack4 系列教程(四): 單頁面解決方案–程式碼分割和懶載入

相關文章