通过 externals 加载外部 CDN 资源（Vue项目上线优化四）

最新推荐文章于 2024-09-14 14:38:02 发布

Linxi~

最新推荐文章于 2024-09-14 14:38:02 发布

阅读量2.9k

点赞数 3

分类专栏： vue

原文链接：https://blog.csdn.net/weixin_44253336/article/details/104753082

版权

vue 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

1.发现项目中存在的问题

为了直观地发现项目中存在的问题，我们可以在打包时生成报告。我们可以通过VueCli可视化的UI面板运行bulid直接查看报告。

而在报告中我们发现了有这么一个文件，体积比较大，这样可能会造成我们较长时间的请求。

2.那么这个文件是怎么来的呢？它的作用是什么？

原来，其实默认情况下，项目中我们通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，而这一个文件就是图中所示的那个文件。从而导致打包成功后，单文件体积过大的问题。

3.我们该怎么做来减少体积？

为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。这样就可以有效的减少单文件的体积。
在用到该依赖包的时候会从Window的全局对象身上找现成的对象来进行使用。

什么是CDN资源？详细见该文章 =>CDN通俗易懂简介，再看不懂，可能不适合当程序员

一些依赖包的CDN资源可以在这些网址上找到：
https://www.bootcdn.cn/
http://www.staticfile.org/
https://unpkg.com/

4.使用步骤示例

1、在Vue.config.js文件中添加配置项。（如若没有请在package.json所在同级创建该文件）

在 vue.config.js 文件的发布模式中添加代码：

// 发布模式--发布阶段的打包入口
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })

注意：其中参数2对象中是键为依赖包的名字。值为使用Window全局的某个对象。

2、设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项。打开开发入口文件main-prod.js，删除导入的 quill（富文本编辑器）和 nprogress 样式表，然后在public/index.html文件的头部，添加如下的 CDN 资源引用：

<!-- 在我们的项目中用到了这两个插件nprogress 和 富文本编辑器-->

<!-- 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" />

3、为了在window全局包含这些依赖包对象，需在public/index.html 文件的头部，添加如下的 CDN 资源引用： (引入后的依赖包最终会存在Window全局中)

<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/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

5、通过 CDN 优化 ElementUI 的打包

虽然在开发阶段，我们启用了 element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将 element-ui 中的组件，也通过 CDN 的形式来加载，这样能够进一步减小打包后的文件体积。

具体操作流程如下：

① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码

② 在 index.html 的头部区域中，通过 CDN 加载 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>

这样最终就完成了。接下来让我们先看下开始时候所占的依赖项大小和优化后的大小！

未优化：