依赖库CDN加速

看到有小伙伴使用CDN的方式引入一些依赖包，觉得非常的nice ，然后我也开始使用了。我将 vue axios vue-router element-ui vuex等等都分离了出来，在正式环境下，通过CDN，确实有了一些明显的提升，所以说大家可以进行尝试。

采用CDN之前
image.png
采用CDN之后
image.png
市面上有两款不错的CDN存储网站：
国内的：BOOTCDN
国外的：JSDELIVR
注意：目前供应链采用的是国外的，因为可以看到版本管理，以及市面上使用情况，内容比较详细！！

优化的步骤

1.将依赖的vue、vue-router、vuex、element-ui和axios这五个库，全部改为通过CDN链接获取。借助HtmlWebpackPlugin,可以方便的使用循环语法在index.html里插入js和css的CDN链接。

  1. <% htmlWebpackPlugin.options.externals.css.forEach(function(item){ if(item){ %>
  2.   <link href="<%= item %>" rel="stylesheet" />
  3. <% }}) %>
  4. <% htmlWebpackPlugin.options.externals.js.forEach(function(item){ if(item){ %>
  5.   <script src="<%= item %>"></script> 
  6. <% }}) %>

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。

2.在build/utils.js里面添加需要的CND文件

  1. //cdn镜像源
  2. exports.externalConfig = {
  3.   css: [
  4.     'https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css'
  5.   ],
  6.   js: [
  7.     'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
  8.     'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
  9.     'https://cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
  10.     'https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js',
  11.     'https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js',
  12.   ]
  13. }

3.在build/webpack.base.conf.js中添加如下代码，这使得在使用CDN引入外部文件的情况下，依然可以在项目中使用import的语法来引入这些第三方库，也就意味着你不需要改动项目的代码，这里的键名是import的npm包名，键值是该库暴露的全局变量。

  1. //这使得在使用CDN(查看build/utils.js)引入外部文件的情况下，依然可以在项目中使用import的语法来引入这些第三方库
  2.   externals: {
  3.     'vue': 'Vue', //左侧是我们自己引入时候要运用的
  4.     'vue-router': 'VueRouter',
  5.     'vuex': 'Vuex',
  6.     'element-ui':'ELEMENT', //必须为 ELEMENT,否则会报错找不到element,因为elementUI外部库对外暴露的全局变量是'ELEMENT
  7.     'axios':'axios'
  8.   }

注意:
a.左侧名称类似main.js中，import ``Vue``from 'vue'``from的值
b.右侧名称是代码CND引入文件暴露出来的全局变量

4.在build/webpack.dev.conf.js 以及 build/webpack.prod.conf.js

  1.  new HtmlWebpackPlugin({
  2.       filename: 'index.html',
  3.       template: 'index.html',
  4.       // inject: true,
  5.       externals: utils.externalConfig
  6.     }),

5.main.js 把import 'element-ui/lib/theme-chalk/index.css' 需要注释掉，因为已经CDN引入了

6.卸载依赖的npm包，npm uninstall axios element-ui vue vue-router vuex

打包过后你会发现是如下的情况
image.png
可以看出：

  • app.css： 因为不再通过import 'element-ui/lib/theme-chalk/index.css',而是直接通过CDN链接的方式引入element-ui样式，使得文件小到了bytes级别，因为它现在仅包含少量的项目的css。
  • app.js：几乎无变化，因为这里面主要还是自己业务的代码。
  • vendor.js：将5个依赖的js全部转为CDN链接后，已经小了很多。
  • 数字.js和mainfest.js：这些文件本来就很小，变化几乎可以忽略。

参考文件：
webpack项目的优化(以vue为例)
webpack使用HtmlWebpackPlugin进行cdn配置

GZIP

这个东西需要后端进行配置，当然，如果你有操作 Nginx 的权限的话，那么可以自己开启，反正我认为，这个东西提升还是很大的。具体的可以看这篇文章。Vue CLI 2&3 下的项目优化实践 —— CDN + Gzip + Prerender

使用Gzip两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。

优化的步骤

1.我们都知道config/index.js里有一个productionGzip的选项，那么它是做什么用的？我们尝试执行npm install --save-dev compression-webpack-plugin@1.x,并把productionGzip设置为true，重新build
注意：一定要装1.x的版本，不然不会build成功。
image.png
image.png
image.png
image.png
image.png
从上图可以明显看出开启gzip前后，文件大小有三四倍的差距，加载速度也从原来的7秒多，提升到5秒多.

附上nginx的配置方式

  1. http {
  2.   gzip on;
  3.   gzip_static on;
  4.   gzip_min_length 1024;
  5.   gzip_buffers 4 16k;
  6.   gzip_comp_level 2;
  7.   gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
  8.   gzip_vary off;
  9.   gzip_disable "MSIE [1-6]\.";
  10. }

参考文件：
总结我对Vue项目上线做的一些基本优化
Vue CLI 2&3 下的项目优化实践 —— CDN + Gzip + Prerender