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

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> 

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

 

未优化:

优化后:

6、最终打包效果

从生成的报告中我们可以明显的看到单文件体积的减少,还有依赖项目大小的减少,请求时间也大大的缩短了。
而在右边依赖项中我们也可以发现少了一些依赖包,这是因为通过externals最终这些依赖不会打包到项目中。而在使用到这些依赖的时候,我们会从window全局找到这个依赖包。

 

 

 

 


 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值