vue项目首页优化问题（前后端都要优化）

Dear 丶 2022-12-15 03:25 114阅读 0赞

本篇主要讲解 Vue项目打包后 dist >>js>>vendor.js文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用

## 1. vendor.js 优化(减少体积) ##

> 由于Vue项目随着功能变多 依赖也会随之变多，减少vendor.js的主要方法就是将其 不打包依赖！！

### 1.1 第一步、cdn引入各种包 ###

index.html中cdn的方式引入vue、vuex、axios、vant-ui、element-ui、等包，如下图：

![在这里插入图片描述][20201015100310906.png_pic_center]

### 1.2 第二步、在使用vue等包的地方，注释掉import引入 ###

打开main.js文件 注释掉需要排除的依赖import ，并且注释掉 Vue.use

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

> //Vue.prototype.$axios = axios;  
> //Vue.use(iView)

### 1.3 第三步、打包忽视掉vue等包 ###

在webpack.base.conf.js ， 把需要从cdn方式引入的依赖，都排除掉，包括 iview vue axios 等等 如下图  
  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]

### 1.4 最终重新打包 npm run build ###

可以发现 Vue 的vendor.js文件确实变小了很多，这样在加载首页的时候 浏览器请求它的时候不会过大

`可见vendor.js从 1M多已经减少到 400k了`  
![在这里插入图片描述][2020101510102032.png_pic_center]

## 2.Vue开启Gzip压缩 ##

### 2.1 config/index.js 开启productionGzip ###

将其productionGzip 配置成true

![在这里插入图片描述][20201015101109731.png_pic_center]

### 2.2 配置Gzip的 插件配置 ###

打开webpack.prod.config.js 配置一下这段代码  
  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]  
代码如下

if (config.build.productionGzip) { 
      const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
      webpackConfig.plugins.push(
     new CompressionWebpackPlugin({ 
       asset: '[path].gz[query]',
       algorithm: 'gzip',
       test: new RegExp(
         '\\.(' +
         config.build.productionGzipExtensions.join('|') +
         ')$'
       ),
       threshold: 10240,
       minRatio: 0.8
      })
       )
    }

### 2.3 配置打包report 查看详细打包信息 ###

打开package.json ，配置

"report": "npm run build --report=true"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]

### 2.4 重新打包查看Gzip压缩情况 ###

重新 npm run build 可以看到提供的 gz 压缩包 vendor.js.gz 已经小到了100k左右了， 从刚开始1M已经优化到现在的100k了  
  ![在这里插入图片描述][20201015103732331.png_pic_center]

## 3.开启Nginx Gzip功能 （后端操作） ##

### 3.1 gzip的概念 ###

gzip 是 Web 世界最广泛的文件压缩算法，已经得到了绝大多数的服务端和客户端软件（例如我们使用的浏览器）的支持。gzip 最为擅长的是压缩纯文本文件，其效果非常明显，大约可以减少70％以上的文件大小，所以 Web 项目中开启 gzip 十分必要

### 3.2 nginx gzip如何配合vue使用 ###

事先用Vue生成的 gzip 压缩好文件（.gz）让 nginx 根据请求来自己选择 .gz 文件输出，利用 nginx 中的模块 http\_gzip\_static\_module，不消耗 CPU 资源，nginx配置只需要在上述里面加入一行即可，如下：

gzip_static on;

### 3.3 主要要添加 http\_gzip\_static\_module 模块 ###

nginx 中的模块 http\_gzip\_static\_module 默认是不在的

所以我们要记得在 nginx 里面添加上 http\_gzip\_static\_module 模块，参见：yum安装下的nginx，如何添加模块，和添加第三方模块

安装完http\_gzip\_static\_module模块后，使用 nginx -V 命令查看是否模块加载成功  
  ![在这里插入图片描述][20201015103841585.png_pic_center]

### 3.4 nginx gzip 详细配置 ###

打开nginx的nginx.conf文件 在server部分配置上gzip的配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]

gzip on;   开启或关闭gzip on off
     gzip_buffers 32 4k;
     gzip_comp_level 5;  压缩等级，字数越大压缩越好，时间也长
     gzip_static on;  重要！表示使用已经压缩好的gz文件，根据请求 配合vue生成的gz文件
     gzip_min_length  1k;
     gzip_http_version 1.1;
     gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

### 3.5 查看是否生效 ###

可以看到相应头中存在 Content-Encoding:gzip 表示已经配置成功  
  ![在这里插入图片描述][20201015104009209.png_pic_center]

## 4.首页接口优化 ##

对首页接口page 进行优化，主要是针对不需要的字段不返回，减少报文，一开始包括了markdown的报文和markdown生成的html报文 导致报文很大，请求接口耗时很长  
 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]  
可以看到优化后的接口只有43ms 即可  
![在这里插入图片描述][20201015104133191.png_pic_center]

## 5. 图片上CDN ##

将首页Banner图进行拆分压缩 8份，并且放到CDN上  
 ![在这里插入图片描述][20201015104253266.png_pic_center]

将其他图片也全部放到CDN上

[20201015100310906.png_pic_center]: /images/20221123/6c5adcee18504563ba5dfa46e3672c51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/dbf03ddd8d4f4c0c9f30267212ebb35b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/50ea9f8bdb8648b39f31d204aa949671.png
[2020101510102032.png_pic_center]: /images/20221123/81e0550b53ca4784bb6c46da56b02649.png
[20201015101109731.png_pic_center]: /images/20221123/43ab49b5a05843f2a5c766e44603fdda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/7401835b08b64d889439ce678892fe3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/6954f623e9a9421689995259a91ed60e.png
[20201015103732331.png_pic_center]: /images/20221123/d97e6e61d55141ab999cbab1029cd574.png
[20201015103841585.png_pic_center]: /images/20221123/3e6cae9fae3f4c9c979e7fe14cdbdc47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/5d39ac4469824d4eb1913a3285d3d6d2.png
[20201015104009209.png_pic_center]: /images/20221123/af92d48924c0468db0f29398a7bb4925.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/d7b298a98961412690b1535393bebc34.png
[20201015104133191.png_pic_center]: /images/20221123/af54b34a4446499e8fb528710bed2ab8.png
[20201015104253266.png_pic_center]: /images/20221123/5f285523da48475eb3fbbd1d7d3f72fd.png