前端性能优化 - 如何加快网页访问速度（nginx cdn compression-webpack-plugin gzip）_前端项目可以放到cnd加速吗

1. 前端性能优化之将资源使用CDN引入

1.1 在vue.config.js里面配置webpack

configureWebpack: config => {
   if (process.env.NODE_ENV === 'production') {
     // 生产环境
     config['externals'] = {
     	// 属性名称是 echarts，表示应该排除 import $ from 'echarts' 中的 echarts模块。为了替换这个模块，echarts的值将被用来检索一个全局的 echarts变量。换句话说，当设置为一个字符串时，它将被视为全局的（定义在上面和下面）
       'ElementUI' : 'element-ui',
       'echarts': 'echarts',
       'vue': 'Vue',
       'vue-router': 'VueRouter',
       'axios': 'axios',
       'vuex': 'Vuex'
     }
   } else {
     // 开发环境
   } 
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

当然你也可以写成对象的形式 externals：{……}

1.2 在index.html找到相应的cdn资源进行引入

<link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.3/vuex.min.js"></script>
1
2
3
4
5
6
7

2. 取消preload与prefetch

2.1 在vue.config.js里面配置

chainWebpack(config){
  config.plugins.delete('prefetch')
  config.plugins.delete('preload')
}
1
2
3
4

什么是prefetch？

浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求。如果有多个‘预请求提示’则会在浏览器空闲时排队执行。当浏览器离开空闲状态时正好在‘预请求’资源，那么浏览器会取消任何正在进行中的请求（同时会将部分响应数据放置在缓存中，而在Header中继续使用Content-Range字段 ）并停止处理‘预请求’队列。

什么是preload?

preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，需要执行时再执行

这两个看起来挺有用的，但为什么我的项目把题目取消了呢？

因为我实际测试过，我使用预加载的情况，vendors.js加载时间会在2.5s作用。我不使用的情况，vendors.js加载会在900ms左右。所以我就选择了取消它们。

3. 开启gzip

3.1 前端打包开启gzip

首先要安装compression-webpack-plugin这个包，它是专用于将项目打包是压缩的。

npm install compression-webpack-plugin --save-dev
1

在vue.config.js中进行配置

configureWebpack: config => {
 if (process.env.NODE_ENV === 'production') {
   // 生产环境
   config.plugins.push(
     new CompressionPlugin({
       test: /\.(js|css)?$/i, // 哪些文件要压缩
       filename: '[path][base].gz',　// 压缩后的文件名
       algorithm: 'gzip',　// 使用gzip压缩
       minRatio: 1,　// 压缩率小于1才会压缩
       deleteOriginalAssets: false // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false
     })
   )
 } else {
  // 开发环境

 } 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.2 配置nginx

gzip on;                 #决定是否开启gzip模块，on表示开启，off表示关闭；
gzip_static on;			 #它会去找.gz后缀的文件，找到了就直接返回。没找到就找到原来的文件，进行压缩再返回
gzip_min_length 1k;      #设置允许压缩的页面最小字节(从header头的Content-Length中获取) ，当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时，所有页面都进行压缩。建议大于1k
gzip_buffers 4 16k;      #设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间,param2:int(k) 后面单位是k。这里设置以16k为单位,按照原始数据大小以16k为单位的4倍申请内存
gzip_http_version 1.1;   #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_comp_level 4;       #设置gzip压缩等级，等级越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大；等级1-9，最小的压缩最快 但是消耗cpu
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascrip;    #设置需要压缩的MIME类型,非设置值不进行压缩，即匹配压缩类型
gzip_disable "MSIE [1-6]\."; #IE6不压缩
1
2
3
4
5
6
7
8

比较坑的一点！！
gzip_types 一定要写正确，建议复制我的。之前就因为gzip_types写的不正确，导致response header里都没有Content-Edcoding：gzip。

在response header 看到Content-Encoding：gzip 就说明配置成功啦！

4. 看看成果吧~

没有优化之前的加载时间

优化之后的加载时间