本节课讲解
webpack4
打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack
配置来实现的,而是通过webpack
的写法和内置函数实现的。
目前webpack
针对此项功能提供 2 种函数:
import()
: 引入并且自动执行相关 js 代码require.ensure()
: 引入但需要手动执行相关 js 代码
本文将会进行逐一讲解。
专注前端与算法的系列干货分享,欢迎关注(¬‿¬):
「微信公众号:心谭博客」| xin-tan.com | GitHub
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