Webpack打包优化-外部扩展externals的实际应用

Webpack打包优化-外部扩展externals的实际应用

拆分文件

我们在使用js库如vue或者react等的时候，webpack会将他们一起打包，react和react-dom文件就好几百k，全部打包成一个文件，可想而知，这个文件会很大，用户在首次打开时往往会出现白屏等待时间过长的问题，这时，我们就需要将这类文件抽离出来。

externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }

webpack中的externals配置提供了[不从bundle中引用依赖]的方式。解决的是，所创建的bundle依赖于那些存在于用户环境中的依赖。
externals：

string，regex，function，array，object

为了防止将某些import包（package）打包到bundle中，而是在运行时（runtime）再去外部获取这些扩展包，例如：从CDN中引入jQuery，而不是把它打包

<script src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="a