Vue项目首页优化问题

最新推荐文章于 2024-08-20 17:27:35 发布

Cry-0707

最新推荐文章于 2024-08-20 17:27:35 发布

阅读量179

点赞数

文章标签： vue

原文链接：https://blog.csdn.net/weixin_43638968/article/details/109091552

版权

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

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

1.1 第一步、cdn引入各种包

index.html中cdn的方式引入vue、vuex、axios、vant-ui、element-ui、等包，如下图：
在这里插入图片描述

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

打开main.js文件注释掉需要排除的依赖import ，并且注释掉 Vue.use
在这里插入图片描述

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

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

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

1.4 最终重新打包 npm run build

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

2.Vue开启Gzip压缩

2.1 config/index.js 开启productionGzip

将其productionGzip 配置成true
在这里插入图片描述

2.2 配置Gzip的插件配置

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

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"

在这里插入图片描述

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

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

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配置只需要在上述里面加入一行即可，如下：

 1. 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 命令查看是否模块加载成功:
在这里插入图片描述

3.4 nginx gzip 详细配置

打开nginx的nginx.conf文件在server部分配置上gzip的配置
在这里插入图片描述

   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;