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()：

构建后的代码：

页面效果：