04-代码分割和懒加载.md

单页面解决方案——代码分割和懒加载

webpack4 打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过 webpack 配置来实现的，而是通过webpack 的写法和内置函数实现的。

目前webpack针对此项功能提供 2 种函数：

• import(): 引入并且自动执行相关 js 代码
• webpack内置方法require.ensure(): 引入但需要手动执行相关 js 代码

requir.ensure(): 只是加载并不执行 import(): 加载并且自动执行

代码分割

使用场景

• 分离业务代码 和 第三方依赖
• 分离业务代码 和 业务公共代码 和 第三方依赖
• 分离首次加载 和 访问后加载的代码

require.ensure 对promise有依赖，如果不支持需要加垫片polyfill

参数

• []:dependencies 只加载进来并不执行
• callback
• errorCallback （可省略）
• chunkName

起步

// page.js
require.ensure(
  ["lodash"],   // 可以为空 []
  function () {
    var _ = require("lodash");
    _.join(["1", "2"]);
  },
  "vendor"
);


// --------------加载多个------------
require.ensure(
  ["./subPageA.js", "./subPageB.js"],
  function () {
    var subPageA = require("./subPageA");
    var subPageB = require("./subPageB");
  },
  "subPage"
);

因为 subPageA.js 和subPageB.js 都引入了 module.js,从打包后的文件可以看出并没有把module.js从两个文件中抽离出来

可以进一步抽离,这样module.js的内容就在 打包后的 page.bundle.js中了

require.include("./module.js"); // 将subPageA和subPageB共用的module.js打包在此page中

import()

import() -> Promise import().then()

起步

import 导入可使用魔法注释来指定打包后 chunk 的名字

import(/* webpackChunkName: 'lodashhahaha'*/ "lodash").then(function(_) {
  console.log(_.join(["1", "2"]));
});

import(/* webpackChunkName: 'nice-subPageA'*/ "./subPageA").then(function(subPageA) {
  console.log(subPageA);
});

import(/* webpackChunkName: 'nice-subPageB'*/ "./subPageB").then(function(subPageB) {
  console.log(subPageB);
});

在 NetWork 选项中，可以看到懒加载成功了：