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

阿新 • • 發佈：2019-01-13

本節課講解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，打包結果如下：
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 系列教程(四): 單頁面解決方案--程式碼分割和懶載入

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

webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

hub 名稱 ava mas dirname 相關 static tps 界面本節課講解webpack4打包單頁應用過程中的代碼分割和代碼懶加載。不同於多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實現的，而是通過webpack的寫法和內

webpack4 系列教程(十四)：Clean Plugin and Watch Mode

作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址。更歡迎來我的小站看更多原創內容：godbmw.com，進行“姿勢”交流 ♪(∇*) 0.

webpack4系列教程（四）：處理專案中的資原始檔（一）

傳送門： webpack4系列教程（一）：初識webpack webpack4系列教程（二）：建立專案，打包第一個JS檔案 webpack4系列教程（三）：自動生成專案中的HTML檔案 1. Loader的使用之前的博文已經介紹了Loader的

C#進階系列——WebApi 跨域問題解決方案：CORS

dea ati ice pro target default 異常測試工具復雜前言：上篇總結了下WebApi的接口測試工具的使用，這篇接著來看看WebAPI的另一個常見問題：跨域問題。本篇主要從實例的角度分享下CORS解決跨域問題一些細節。 WebApi系列文章

Spring Boot系列教程四：配置文件詳解properties

date int ava ota axu return 端口 rand work 一.配置隨機數，使用隨機數在application.properties文件添加配置信息 1 #32位隨機數 2 woniu.secret=${random.value} 3 #隨機整數

Shiro學習系列教程四：集成web(二)

shiro學習凱哥java 本講主要內容：1：shiro對訪問URL可使用通配符進行匹配2：shiro標簽的使用3：shiro會話的機制URL匹配方式：演示：現在shiro.ini配置的路徑為：直接訪問/adminOk.沒問題。那麽我們訪問/admin1呢？就不行了。修改shiro.ini配置文件。

webpack4 系列教程(一): 打包JS

func app lob blog pac exp 運行 conf github webpack 本身就是為了打包js所設計，作為第一節，介紹怎麽打包js。 1. 檢驗webpack規範支持 webpack支持es6, CommonJS, AMD。創建vendor文件

webpack4 系列教程(十五)：開發模式與webpack-dev-server

作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十五)：開發模式與 webpack-dev-server》原文地址。更歡迎來我的小站看更多原創內容：godbmw.com，進行“姿勢”交流 ♪(^∇^*) 0. 課程介紹和資料 &g

webpack4 系列教程(十三)：自動生成HTML檔案

作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十三)：自動生成 HTML 檔案》原文地址。更歡迎來我的小站看更多原創內容：godbmw.com，進行“姿勢”交流 ♪(^∇^*) 0. 課程介紹和資料 >>>本節

Java開發公眾號系列教程(四)：公眾號訊息推送|事件訊息|模板訊息應用

今天分享一下公眾號推送模板訊息的開發案例。應用場景：使用者在公眾號上進行了一些操作後，公眾號自動向使用者推送相關的模板訊息，常見的比如使用者在公眾號付款後會收到商家的付款訊息提醒。接下來通過筆者在測試賬戶上的開發案例，效果如下： &nb

webpack4系列教程

webpack4 系列教程(十六)：開發模式和生產模式·實戰 webpack4 系列教程(十五)：開發模式與webpack-dev-server webpack4 系列教程(十四)：Clean Plugin and Watch Mode webpack4 系列教程(十三)：自動生成HTM

webpack4 系列教程(十): 圖片處理彙總

多圖預警!!! 此篇博文共 5 張圖(託管在 GitHub)，國內使用者請移步>>>原文. 或者來我的小站哦 0. 課程原始碼和資料本次課程的程式碼目錄(如下圖所示)：本節課會講述webpack4中的圖片常用的基礎操作

掃一掃跳轉到微信非官方網頁提醒頁面解決方案

測試時，本來打算通過微信掃一掃，開啟一張圖片，發現會跳轉到如下一個頁面：妹的，我用的可是騰訊雲cos的服務，自家的騰訊雲地址都不認。解決方案：把圖片域名繫結為一個公眾號的業務域名，也就是白名單啦，讓微信認為這是一個安全的域名。需要注意的是，把

webpack4 系列教程(十二)：處理第三方JavaScript庫

0. 課程介紹和資料本節課的程式碼目錄如下：本節課的package.json內容如下： { "dependencies": { "jquery": "^3.3.1" }, "devDependencies": { "webpack": "^4.16.1" } } 1.

webpack4 系列教程(十六)：開發模式和生產模式·實戰

作者按:這是webpack4系列最後一篇教程了。這篇文章在之前所有教程的基礎上，做了一個真正意義上的 webpack 專案！我花費了三個月整理了這份教程，並且完善了相關示例程式碼，也更熟悉 webpack 的理論和應用，當然，也感謝大家的支援。好了，感慨完畢，

以太坊構建DApps系列教程(四):Story DAO的白名單和測試

在本系列關於使用以太坊構建DApps教程的第3部分中，我們構建並將我們的代幣部署到以太坊測試網路Rinkeby。在這部分中，我們將開始編寫Story DAO程式碼。我們將使用第1部分中列出的條件來做指導。合約大綱讓我們用這個骨架建立一個新的合約StoryDao.sol：

熊大UWB系列教程四：UWB超寬頻三基站定位系統原理介紹與效果展示

對超寬頻感興趣的朋友，請關注熊大的微信公眾號，熊大將在上面釋出超寬頻教程，行業資訊，技術應用。幫助你更好的瞭解、學習、使用超寬頻技術。購買熊大超寬頻系統，會提供微控制器原始碼，上位機原始碼還有技術支援。熊大最近忙於開發超寬頻多基站多標籤定

sqlalchemy 系列教程四使用原生sql 查詢資料庫

sqlalchemy 中使用 sql 查詢資料庫背景有時候，我們希望通過原生 sql 來查詢資料庫，這個時候應該怎麼辦呢？ sqlalchemy 已經給我們提供了這樣的介面，通過 text 就可以輕鬆實現了。例1 #!/usr/bi

飛行者虛擬定位蘋果免越獄使用教程+常見問題及解決方案（免費試用）

飛行者虛擬定位蘋果免越獄使用教程+常見問題及解決方案（免費試用）飛行者永久更新地址： http://www.huanghongcheng.com/qudong/flierV2.4.rar 歡迎大家下載正版,謝謝支援！正常情況下，我們可以輕輕鬆鬆一鍵

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

1. 準備工作

2. 編寫配置檔案

3. import()編寫page.js

4. require()編寫page.js

相關推薦

3. `import()`編寫`page.js`

4. `require()`編寫`page.js`