四：单页面解决方案--代码分割和懒加载

本节课讲解

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

文件，通过