Vue通过externals加载外部CDN资源

案例

• 在我们打包项目的时候，会发现一些依赖包占用的空间很大，而现在很多的依赖包都在外部CDN服务器上有相应的资源，那么我们就可以使用外部CDN资源，减轻项目服务器的压力
• 默认情况下，通过 import 导入的第三方依赖包最终会被打包合并到同一个文件中，从而导致打包成功后出现单文件体积过大的问题

解决方法

• 为了解决上述问题，可以通过 webpack 的 externals 节点来配置外部的CDN资源
• 凡是生命在 externals 中的第三方依赖包，都不会被打包

步骤

• 在 vue.config.js 的发布模式的方法快中添加代码

config.set('externals', {
  // 如果在打包期间，发现import的一个包名为vue，就不会把这个包合并到文件中
  // 而是去window全局查找 Vue 对象，并直接使用
  vue: 'Vue',
  'vue-router': 'VueRouter',
  axios: 'axios',
  lodash: '_',
  echarts: 'echarts',
  nprogress: 'NProgress',
  'vue-quill-editor': 'VueQuillEditor'
})

• 把 main-prod.js 文件中引入的样式表删除

删除前
// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

删除后
// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'

// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'

• 在 public/index.html 中添加如下CDN资源引用

<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>

注意，如果引入了图标字体资源，可以不删除，但是如果图标的css资源也可以在CDN服务器上获取，那么也可以删除，再放到 index.html 中

• 再次打包效果，可以看到体积明显变小
  

扩展

• 那如果要把 element-ui 也优化了，通过CDN资源引入呢？
• 其实也是一样的步骤，首先将导入的语句删除或注释掉，然后在 index.html 中引入 element-ui 的JS和CSS样式链接
  

<!-- 链接也可以在官方文档获取 -->
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>