本节课解说
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()
一致,这里不再冗赘。
迎接技术交流,援用请说明出处。
个人网站:
GodBMW.com