四：單頁面解決方案--代碼分割和懶加載

本節課講解

webpack4

打包單頁應用過程中的代碼分割和代碼懶加載。不同于多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過

webpack

配置來實作的，而是通過

webpack

的寫法和内置函數實作的。

目前

webpack

針對此項功能提供 2 種函數：

1. import()

   : 引入并且自動執行相關 js 代碼

2. require.ensure()

   : 引入但需要手動執行相關 js 代碼

本文将會進行逐一講解。

本節課講解

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

，打包結果如下：

我們建立

index.html

檔案，通過