webpack 中的动态 import

本文介绍了 webpack 中的动态 import。

懒加载脚本

在项目中，我们的某些代码块是在某些特殊的时候才会用到，如果我们把这些代码打包到一个 bundle 中，不仅会使 bundle 体积变大，也会让浏览器加载不必要的代码。如果使用脚本懒加载，就能够使得初始下载的代码更小，实现按需加载。

懒加载的两种方式

懒加载有两种方式，分别是：

1. Common JS: require.ensure（已被 import() 替代），参考：webpack 模块方法 - require.ensure
2. ES6: 动态 import

动态 import

import('path/to/module') -> Promise

调用 import() 之处，被作为分离的模块起点，意思是，被请求的模块和它引用的所有子模块，会分离到一个单独的 chunk 中。

通过 webpack 构建之后，import () 会将模块抽离成为一个独立的文件，并在调用的地方，触发一个 jsonp 请求，加载这个模块。

调用 import ()：

构建后的代码：

页面效果：