懒加载或者按需加载，是一种很好的优化网页或应用的方式。
这种方式实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。
例子：
增加一个交互，当用户点击按钮的时候用 console 打印一些文字。等到第一次交互的时候，再加载print.js代码块。
此时项目结构：
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
|- print.js
|- /node_modules
新建print.js：
src/print.js：
console.log(
'console.log : The print.js module has loaded!'
);
export default () => {
console.log('Button Clicked: Here is "some text"!');
};
dist/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack demo - 管理资源</title>
</head>
<body>
<script src='bundle.js'></script>
</body>
</html>
此时项目结构：
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
|- print.js
|- /node_modules
src/index.js
import _ from 'lodash';
function component () {
const element = document.createElement('div');
const btn = document.createElement('button');
const br = document.createElement('br');
btn.innerHTML = 'Click me and look at the console!';
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.appendChild(br);
element.appendChild(btn);
btn.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
const print = module.default;
print();
});
return element;
}
document.body.appendChild(component());
注意：当调用 ES6 模块的
import()方法（引入模块）时，必须指向模块的.default值，因为它才是 promise 被处理后返回的实际的module对象。
运行 npm run build：
打开 index.html文件：
点击按钮：
