解决网站部署到nginx，浏览器首次访问慢的问题

于 2024-08-09 09:50:19 发布
阅读量65 收藏
点赞数 3
文章标签： nginx 运维 阿里云
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62780474/article/details/141053328
版权

在操作之前的首次加载时间

解决办法：使用nginx压缩之后

在serve中开启压缩

serve{
# 开启gzip压缩
		gzip on;
		gzip_min_length 1k; 
		gzip_buffers 4 16k; 
		gzip_http_version 1.1; 
		gzip_comp_level 6; 
		gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json; 
		gzip_disable "MSIE [1-6]\."; 

}

如下图

使用./nginx -s reload重新加载配置文件，开启无痕再次访问

直接上图

速度提升三倍左右

胖小楠
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuepress生成静态文件 部署到nginx 反向代理服务器
sinat_18497785的博客
03-08 5362
最近apex英雄很火，个人搞了一个小破站，用国外tracker网站的api做了一个战绩查询工具，并添加了一键举报。 最近想写个博客，因为一直对vue情有独钟就想看看有没有什么开源的博客工具。 搜索一番发现了vuepress，然后才发现原来很多开源的vue组件或者工具的文档都是用这个来写的。。。 最终效果 http://m.apex-asst.top/doc/ 但是发现由于这个极其适合部署在gith...
nginx开启gzip压缩
u012114437的博客
09-21 206
gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 2; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/jso...
nginx+vuepress搭建
one_week的专栏
10-19 1734
因为工作需要，需要在内部网络构建一个文档平台；选用比较流行的vuepress；本文以gitlab作文档版本管理及vuepress构建，文档应用部署到nginx服务器运行； 说明 自动构建使用gitlab-runner+git 编译依赖vuepress+nodejs+yarn 应用部署使用nginx git安装 下载git https://www.kernel.org/pub/software/scm/git/ 上传服务器 解压：tar -vxf /usr/local/git/git-2.9.5.tar..
vuepress项目部署到自己的服务器,VuePress + Nginx + Git 实现自动部署
weixin_39875503的博客
08-09 3425
vuepress是一个静态网站生产器，是一个开箱即用的开源项目文档web页面生成工具，vue的在线web文档就是用vuepress制作的。本文主要介绍如何配置vuepress以及利用nginx部署vuepress，分成项目生成和项目的部署两个部分来说明如何进行博客的搭建。一、项目生成：VuePress在官方文档中，已经有较为详细的介绍，如何生成一个默认主题的VuePress项目。总体来说，可以使用...
Nginx：同一域名下配置Vuepress+Vue(Hash)
最新发布
12-26 560
2.第二个应用的配置用location /wk，下面使用alias d:/dist/wk/dist;，而不是root d:/dist/wk/dist;// base: '/wk/' (在hash模式下是无效的，不需要做这个配置，在history模式下要加这个，但是刷新存在问题，没想深入研究)//publicPath: "./wk/" (这是错误的）publicPath: "./" (就这样不要改)2.www.xxx.com/wk/#（工作平台），费了一些周折，但想清楚逻辑了，也就快了。
Linux下安装配置nginx详解
09-15
在Linux系统中，Nginx是一个非常流行的开源Web服务器，常...这个过程中可能会遇到各种问题，但只要按照步骤逐一解决，就能顺利完成Nginx的部署。记住，遇到问题不要慌张，仔细阅读错误信息，通常都可以找到解决办法。
详解angularjs4部署文件过大解决过程
12-12
通过在Nginx中设置合适的缓存策略，可以使得静态资源在用户首次访问后被浏览器缓存，后续访问时直接从本地加载，从而提高加载速度。此外，对于一些非首屏内容或非必需的资源，我们可以考虑延迟加载或按需加载，减少...
react-router browserHistory刷新页面404问题解决方法
11-28
在使用React开发单页面应用（SPA）时，`react-router`是常见的路由管理库，而`browserHistory`是它提供的一种历史记录管理方式，模仿浏览器的前进、后退功能。然而，当使用`browserHistory`时，遇到刷新页面或者直接...
unbunt上部署asp网站
11-26
### 在Ubuntu上部署ASP.NET网站的关键步骤 #### 一、环境准备与系统更新 1. **确保使用最新版本的Ubuntu**： - 如果是首次安装Ubuntu，请先进行基本的系统设置，例如设置语言和地区。 - 使用`sudo apt-get update...
资源部署
02-16
8. **错误监控**：部署后，需要有实时的错误监控系统，如Sentry或Loggly，以便快速发现并解决问题。 9. **性能优化**：部署过程中应考虑性能优化，包括代码分割以减少首次加载时间，启用HTTP/2，使用Service Worker...
Vue+Nginx 部署
weixin_41643257的博客
01-12 906
Vue脚手架的搭建 安装nodejs brew install nodejs 安装成功之后，查看nodejs版本 node -v 安装国内淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack包 cnpm install webpack -g 安装Vue脚手架 cnpm install vue-cli -g ...
vue gzip压缩生成.gz文件
weixin_44153342的博客
09-18 312
【代码】vue gzip压缩生成.gz文件。
安装了Vue-pdf后，打包文件多出了worker.js和worker.js.gz
weixin_43773218的博客
04-06 742
在安装了vue-pdf预览pdf文件后，发现打包文件变得很慢，打包出来的文件多了worker.js和worker.js.gz文件，导致打包文件变得很大。将 const filename = _loaderUtils2.default.interpolateName(this,修改node_modules/worker-loader/dist/index文件。
纪录篇之vue项目打包压缩成gzip
非完美主义的博客
11-09 1401
话不多说，直接上代码 1. 安装插件 npm install compression-webpack-plugin --save-dev 2.在vue.config.js配置 const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new CompressionPlugin(
nginx部署VuePress静态个人博客
DuebassLei的博客
10-31 3710
nginx部署VuePress生成的静态博客 编译打包 yarn docs:build #编译打包 打包成功 nginx配置 location / { root html/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } ...
基于vue2实现下载文件并生成压缩包
qq_34656296的博客
10-20 1092
1. 依赖于两个插件 首先安装插件’
vue2 进行gzip压缩
u011200562的博客
07-11 1765
首先把productionGzip改为true，开启Gzip压缩； 把asset改为filename 安装npm install compression-webpack-plugin@1.1.12 --save-dev 注意安装1.1.12 版本的，不然会报错
第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
mebell的专栏
09-18 664
npm install image-minimizer-webpack-plugin imagemin imagemin-pngquant --save-dev
vue脚手架 打包压缩代码
业余前端的职业经历
02-18 1471
正常我们开发完项目之后 就会使用npm run build进行项目打包打包完成之后会显示一个代码大小 这个是打包成功的效果但可以看见后面gizzped的效果更小我们怎么做到进行gip压缩 首先我们先安装一个webpack插件 vue-cli本来就是基于webpack的 npm installcompression-webpack-plugin --save-dev...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值