webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

时间 2019-11-17

标签 webpack4 webpack 系列教程页面解决方案代码分割加载繁體版

原文原文链接

本节课讲解webpack4打包单页应用过程当中的代码分割和代码懒加载。不一样于多页面应用的提取公共代码，单页面的代码分割和懒加载不是经过webpack配置来实现的，而是经过webpack的写法和内置函数实现的。javascript

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

import(): 引入而且自动执行相关 js 代码
require.ensure(): 引入但须要手动执行相关 js 代码

本文将会进行逐一讲解。vue

>>> 本节课源码java

>>> 全部课程源码webpack

1. 准备工做

这次代码的目录结构以下：git

其中，page.js是入口文件,subPageA.js和subPageB.js共同引用module.js。下面，咱们按照代码引用的逻辑，从底向上展现代码：es6

module.js:github

export default "module";

subPageA.js:web

import "./module";
console.log("I'm subPageA");
export default "subPageA";

subPageB.js:vue-router

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文件，经过<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 系列教程(四): 单页面解决方案--代码分割和懒加载

1. 准备工做

2. 编写配置文件

3. import()编写page.js

4. require()编写page.js

3. `import()`编写`page.js`

4. `require()`编写`page.js`