webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解
webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过webpack的写法和内置函数实现的。
目前webpack针对此项功能提供 2 种函数：
-
import(): 引入并且自动执行相关 js 代码 -
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文件，通过<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()一致，这里不再冗赘。
欢迎技术交流，引用请注明出处。
个人网站：yuan xin
原文链接：
下一篇： 刚毕业没找到工作之际