Vue项目优化——通过 externals 加载外部 CDN 资源

悠悠 2023-07-12 14:53 12阅读 0赞

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

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

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/202003091511574.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size\_16,color\_FFFFFF,t\_70][https_img-blog.csdnimg.cn_202003091511574.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]  
而在报告中我们发现了有这么一个文件，体积比较大，这样可能会造成我们较长时间的请求。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]

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

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

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

为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。 这样就可以有效的减少单文件的体积。

在用到该依赖包的时候会从Window的全局对象身上找现成的对象来进行使用。

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

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

### 4.使用步骤示例 ###

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

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

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

1.  删除相应依赖包`import`的`CSS`文件，然后在`public/index.html`文件的头部，添加如下的 CDN 资源引用：

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

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

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

未优化：![在这里插入图片描述][20200309161849718.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 1]  
优化后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 3]

### 5.最终打包效果 ###

从生成的报告中我们可以明显的看到单文件体积的减少，还有依赖项目大小的减少，请求时间也大大的缩短了。

而在右边依赖项中我们也可以发现少了一些依赖包，这是因为通过`externals`最终这些依赖不会打包到项目中。而在使用到这些依赖的时候，我们会从window全局找到这个依赖包。

--------------------

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~

[博主主页 Poetic Code][Poetic Code]

[https_img-blog.csdnimg.cn_202003091511574.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200309151355212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200309152206167.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[CDN]: https://blog.csdn.net/weixin_44253336/article/details/104740343
[https_www.bootcdn.cn]: https://www.bootcdn.cn/
[http_www.staticfile.org]: http://www.staticfile.org/
[https_unpkg.com]: https://unpkg.com/
[20200309161849718.png]: https://img-blog.csdnimg.cn/20200309161849718.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200309161919468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200309162134735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200309162204229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[Poetic Code]: https://blog.csdn.net/weixin_44253336