nginx部署vue项目加载资源慢优化方案

1.问题

2.解决方案推荐gzip压缩解压

2.1 vue项目的配置文件中加如下配置

2.3 nginx服务器配置

1.问题

当我采用nginx部署了vue的项目后发现第一次访问网站需要1分左右才加载出来，打开f12检查发现一个cdn引入花了40多秒，其他的10来秒的也有几个，而我的css和js什么的才几百kb，这要是大点我网站直接就崩了，于是研究了几个方案，得出结论：cdn加速的文件下载到本地，本地在使用使用gzip压缩。

2.解决方案推荐gzip压缩解压

vue要使用gzip压缩首先要安装依赖

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

但可能会打包错误，因为compression的版本比node的低，安装低版本就可以了

npm install --save-dev compression-webpack-plugin@1.0.0 //安装低版本

2.1 vue项目的配置文件中加如下配置

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css', 'png']module.exports = {configureWebpack: {plugins: [new CompressionWebpackPlugin({asset: '[path].gz[query]', // 提示 compression-webpack-plugin@3.0.0的话asset改为filenamealgorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8})]},
}

2.3 nginx服务器配置

找到/etc/nginx/nginx.conf文件中http配置中添加如下内容

gzip on;gzip_static on;gzip_buffers 4 16k;gzip_comp_level 5;gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

然后nginx -s reload 重启一下然后访问网站：

如下图便是成功了

这时候发现响应都在1秒以下，直接起飞！

nginx部署vue项目加载资源慢优化方案相关推荐

Vue项目加载过慢优化研究
近日研究了一下公司vue项目加载过慢问题,首次打开速度要15秒,经过研究,从两方面着手,最终使项目速度降到了3秒一.通过过gzip加载参考文章: 一.webpack优化之Gzip(vue) - 简 ...
nginx部署vue项目，给访问路径加前缀
Nginx安装与启动去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
nginx下部署vue项目概览 - （资源篇）
相关博客: nginx下部署vue项目概览这里使用的是百度云的服务器,CentOS7系统的 linux服务器用centos还是ubuntu系统_Linux nginx服务器搭建以及配置 nginx部 ...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
Centos+Nginx部署Vue项目
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到cento ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
win10 nginx部署前端项目（静态资源服务器和HTML）
win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details ...
服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...

nginx部署vue项目加载资源慢优化方案

1.问题

2.解决方案推荐gzip压缩解压

2.1 vue项目的配置文件中加如下配置

2.3 nginx服务器配置

nginx部署vue项目加载资源慢优化方案相关推荐

最新文章

热门文章