本节课讲解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，打包结果如下：
\"import打包结果\"

我们创建index.html文件，通过< >标签引入我们打包结果，需要注意的是：因为是单页应用，所以只要引用入口文件即可（即是上图中的page.bundle.js）。

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  <  name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <  http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
  < >Document</ >
</head>
<body>
  <  src=\"./dist/page.bundle.js\"></ >
</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()一致，这里不再冗赘。

欢迎技术交流，引用请注明出处。
个人网站：Yuan Xin
原文链接：webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章