vue项目优化——Webpack的externals的理解

下面这边文章写得还是不错的：
webpack官网地址
说一下自己的理解：

webpack官网解释如下：防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)

通过externals加载外部资源，从而让项目体积更小。
默认情况下，通过import导入的第三方依赖包，最终会被合并到同一个文件中，从而导致打包成功后，单个文件的体积过大的问题。

如图下面的文件是1.6MB；右边是导入的依赖项。

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是在exernals中的第三方依赖包，都不会被打包。用到的时候直接通过script引入。

知识点：
通过引入一个第三方的js脚本后，会给window对象提供全局的对象和属性。
传统方式：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    console.log(Vue);
</script>

在控制台上可以看到window上有；额一个全局的Vue函数。

vue中工程化方式：

在vue.config.js中做配置，排除要打包的第三方模块。

其中key是包名，例如 import Vue from 'vue’中的字符串’vue’,
value是引入后在window上添加的方法或者属性。例如引入element-ui脚本，window上会有一个ELEMENT

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    console.log(Vue);
</script>

在index.html中通过script标签引入第三方依赖包。

然后就可以通过import引入的方式正常使用了，打出包体体积也不含externals中排除的依赖包。