欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-05 08:20:32
本节课讲解 打包 单页应用 过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过 配置来实现的,而是通过 的写法和内置函数实现的。 目前 针对此项功能提供 2 种函数: 1. : 引入并且自动执行相关 js 代码 2. : 引入但需要手动执行相关 js 代码 ......

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

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

  1. import(): 引入并且自动执行相关 js 代码
  2. require.ensure(): 引入但需要手动执行相关 js 代码

本文将会进行逐一讲解。

1. 准备工作

此次代码的目录结构如下:

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

其中,page.js是入口文件,subpagea.jssubpageb.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,打包结果如下:
webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

我们创建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>

打开浏览器控制台,刷新界面,结果如下图所示:

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

图中圈出的部分,就是说明import()会自动运行subpagea.js和subpageb.js的代码。

在 network 选项中,我们可以看到,懒加载也成功了:

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

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.jssubpageb.js共同引用了module.js文件,我们可以将module.js体现抽离出来:

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

// ...
// 再输入上面那段代码

最终打包后,检验和引入方法与import()一致,这里不再冗赘。


欢迎技术交流,引用请注明出处。
个人网站:yuan xin
原文链接: