单页应用——懒加载
什么是懒加载
懒加载也叫作惰性加载，其本质就是在页面加载的时候，处于懒加载的 js 不会被请求，当触发某个操作的时候，懒加载的 js 才会被加载。目的就是在页面加载的时候，尽量加载当前页面用到的信息。
准备工作
为了保证代码的统一，首先把安装的依赖贴出来：
{
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
},
"scripts": {
"webpack": "webpack"
}
}
Webpack 的配置 webpack.config.js 如下：
const { join } = require('path');
module.exports = {
mode: 'production',
entry: {
index: join(__dirname, './src/index.js')
},
output: {
path: join(__dirname, './dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js', // 根据 chunk name 生成对应的文件
publicPath: join(__dirname, './dist/') // 入口 bundle 查找其他 chunk 依赖的路径
}
};
在入口文件 index.js 中创建了一个 Button，当点击这个 Button 的时候加载 print.js，这个时候 print.js 就是一个惰性加载的 js。
function component() {
var element = document.createElement('div');
var button = document.createElement('button');
button.innerHTML = '点击查看懒加载';
element.appendChild(button);
button.onclick = e => import ( /* webpackChunkName: "print" */ './print').then(module => {
var print = module.default;
print();
});
return element;
}
document.body.appendChild(component());
惰性加载的 print.js 中的内容如下：
export default () => {
console.log('Button Clicked: Here\'s "some text"!');
};
index.html 的代码如下：
<body>
<script src="./dist/index.bundle.js"></script>
</body>
查看效果
执行命令 yarn webpack，会看到如下的打包信息：
Asset Size Chunks Chunk Names
index.bundle.js 2.26 KiB 0 [emitted] index
print.chunk.js 251 bytes 1 [emitted] print
Entrypoint index = index.bundle.js
这不是重点，重点是在浏览器中打开 index.html，这个时候会在浏览器中看到一个按钮，先不要急着点击。
打开开发者工具，点击 Network，刷新页面，会发现，加载的文件只有两个：
index.html
index.bundle.js
此时点击按钮，会发现，多加载了一个 print.chunk.js，这个就是惰性加载（点击了按钮之后才会加载的内容）。
