「按需引入」的多种实现方式

---

为什么要「按需引入」

通常情况下，按需引入区别于异步加载，但是本文会统一讲述这些「有需要时」才去拿取或剔除相关资源的类似场景，因此标题中的「按需引入」代表了这些做法的泛概念。

随着项目体量提升，如果我们不作干涉，可能会碰到项目首页加载慢、chunk 体积大、各环境配置未相互分离、调试代码需手动剔除等一系列问题，其中有不少问题是构建行为不合理引起的。 本文就这些问题分享一些「按需引入」的实现方式。

异步加载之 import()

import() 语法分为了静态引入以及动态引入。

静态引入无需多说，动态引入也已在 ES6 中得到了实现，import 在支持 ES6 语法的环境中将会是一个全局函数，它接收需要动态引入的脚本地址，返回一个 Promise，其异步返回值将会是一个对象，对象中包含动态引入模块的导出信息。

为了兼容性，Webpack 将会对 import() 语法作编译处理，将其转换为 WebpackJsonp 的加载方式。Webpack 将引入的模块单独打包为一个 chunk，在需要用到这部分代码时再使用注入