懒加载
懒加载，也称作按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处拆分，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。
示例
在代码分离中的例子基础上，进一步做些调整来说明这个概念。那里的代码确实会在脚本运行的时候产生一个分离的代码块 lodash.bundle.js。
问题是加载这个包并不需要用户的交互，每次加载页面的时候都会请求它。这样做并没有多大好处，还会对性能产生负面影响。
试试不同的做法。我们增加一个交互，当用户点击按钮的时候用 console 打印一些文字。但是会等到第一次交互的时候再加载那个代码块（print.js）。为此，我们返回到代码分离的例子中，把 lodash 放到主代码块中，重新运行代码分离中的代码。
新增 src/print.js 文件：
console.log('The print.js module has loaded! See the network tab in dev tools...');
export default () => {
console.log('Button Clicked: Here\'s "some text"!');
}
修改 src/index.js 文件：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
var button = document.createElement('button');
var br = document.createElement('br');
button.innerHTML = 'Click me and look at the console!';
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.appendChild(br);
element.appendChild(button);
// Note that because a network request is involved, some indication
// of loading would need to be shown in a production-level site/app.
button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
var print = module.default;
print();
});
return element;
}
document.body.appendChild(component());
现在运行 webpack 来验证一下我们的懒加载功能：
npm run dev
执行结果如下：
Hash: 22f761e87c26add44e84
Version: webpack 4.0.0
Time: 596ms
Built at: 2018-3-3 20:47:39
Asset Size Chunks Chunk Names
index.bundle.js 555 KiB index [emitted] [big] index
print.bundle.js 645 bytes print [emitted] print
index.html 205 bytes [emitted]
Entrypoint index [big] = index.bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {index} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {index} [built]
[./src/index.js] 744 bytes {index} [built]
[./src/print.js] 170 bytes {print} [built]
在这个例子中，只有当我们点击页面的按钮时，才会加载 print.bundle.js，这样就实现了懒加载或者说按需加载。
框架
许多框架和类库对于如何用它们自己的方式来实现（懒加载）有自己的建议。这里有一些例子：
