vue 项目部署 nginx 开启gzip优化性能

最新推荐文章于 2024-05-03 18:44:10 发布
最新推荐文章于 2024-05-03 18:44:10 发布
阅读量9.6k 收藏 10
点赞数 2
分类专栏： vue nginx 文章标签： vue 性能优化 nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012392251/article/details/80696741
版权

vue-cli项目打包部署nginx，访问项目的时候，发现资源请求很慢，等了一段小白才开始渲染页面，果断F12 Network查看之~

便有了下文作为记录

结果如下：



没错！！凶手就是那条黄色的东东（vendor.js）

我部署的只是一个小项目，vendor.js 就760KB，如果再大一点，结果可想而知。

就去测了一下网站性能 - Google PageSpeed Tool 「自备梯子」

结果优化建议：

<
最低0.47元/天 解锁文章
咖啡走糖唔该
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目开启Gzip压缩和性能优化操作
01-18
vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能 第一步：在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩： npm install –save-dev compression-webpack-plugin 第二步：运行 npm run ...
nginx-1.18.0已开启gzip压缩优化vue项目大小.zip
10-22
vue-element-admin 打包gzip压缩优化vue项目大小并部署到Nginx
登录功能的实现（包括前后端）_前端登录功能实现(1)
最新发布
2401_84412953的博客
05-03 598
try {//号码已占用message: “电话号码已注册过了嗷”,}))try {//无注册账号message: “无注册账号”,})if (!token) {message: “无token”})try{status: 0,message: “验证成功”})} else {message: “token错误”})
前端压缩打包 Vue+vite配合nginx实现gzip压缩
weixin_39559449的博客
12-02 1252
vue前端项目发布的时候，打包可配合nginx实现gzip格式的压缩，这样会减少网络带宽，nginx有两种压缩方式，一个是动态压缩，一个是静态压缩。 1.在 nginx 中实时用 gzip 压缩文件输出，利用 nginx 中的模块 ngx_http_gzip_module， 消耗 CPU 来做压缩，nginx配置如下： 官方配置文档说明 http{ gzip on; gzip_min_length 1k; gzip_buffers 4 16k;
Vue性能优化--gZip
Schaffer的博客
03-29 1227
gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。gzip压缩比率在3到10倍左右，可以大大节省服务器的网络带宽。而在实际应用中，并不是对所有文件进行压缩，通常只是压缩静态文件。
Vue 配置 Gzip 压缩 开启压缩后踩过的坑
qq_34648151的博客
11-30 7301
vue配置compression-webpack-plugin插件 需要后台配合才可以实现ci方法 (1)vue-cli搭建的项目在config/index.js (2)打开CMD，执行&gt;npm install --save-dev compression-webpack-plugn (3)然后 cnpm run build (4) (5)注意事项 上面会提示当前安装版本与当前项目下的w...
vue打包时gzip压缩的两种方案
热门推荐
一只前端小菜鸟
08-24 2万+
开局一张图： 可以看出，在项目部署后，我们的资源文件请求都会保持原本大小，如果文件过大，并且很多的情况下，会导致网络请求耗时，严重点可能阻塞后面的进程。 所以，此篇介绍两种gzip压缩的方式： 1、打包的时候通过webpack配置生成对应的 .gz 文件，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件； 2、浏览器请求xx.js文件时，服务器对xx.js文件进行gzip压缩后传输给浏览器。 webpack打包生成gz文件 安装插件（compression-webpack-
vue 打包部署在 nginx服务中，以及出现的一些问题
qq_39751996的博客
07-06 5247
首先来说操作步骤 前提： 1、你已经安装/下载好 nginx 2、你的vue 项目已经打包完成，并得到了dist文件夹 部署开始： 1、vue 项目打包，在控制台输入 npm run build 等待打包结束后可在项目的同级目录下得到打包文件夹 dist，中包含了我们要部署的 index.html 文件 2、将下载好的 nginx 压缩包解压后，在文件夹地址栏输入 cmd 后回车后可以直接打开文件路径， 3、在窗口命令行中输入 nginx 启动指令： start nginx 然...
vue前端性能优化之分包策略、异步组件、Gzip压缩
dai556688的博客
04-18 3582
项目的性能优化是有完整项目经历的开发者都会遇到得一个问题。这是整个项目开发最后的一步，也是最关键的一步，做一个项目并不是单单完成功能就算结束了，作为开发者，更要站在用户角度去进行项目体验，响应快速的程序交互会直接提升程序的印象分。反之，如果页面间的交互响应缓慢、时常卡顿，无论程序功能再多再强大，让人很难去想去体验第二次。这个时候，性能优化尤为重要。
Vue CLI3 开启gzip压缩文件的方式
10-17
总的来说，Vue CLI3 提供了一种便捷的方式来开启项目中的 gzip 压缩，通过结合 webpack 的插件系统，开发者可以在构建过程中自动完成文件的压缩，从而提升用户体验。同时，理解 gzip 工作原理和配置细节对于优化 web...
Vue+Koa2 打包后进行线上部署的教程详解
10-16
总结来说，Vue+Koa2 的线上部署涉及前端 Vue 项目打包、后端 Koa2 配置、Nginx 反向代理以及 Pm2 进程管理。每个步骤都至关重要，需要细心配置和测试。希望这个教程能帮到你，如果在部署过程中遇到问题，记得查阅...
vue Web部署.docx
01-08
在Vue项目中，开发完成后，我们需要对应用进行优化并创建适合部署的生产构建。这通常通过运行`npm run build`命令来完成。这个命令会编译源代码，进行代码分割、压缩和优化，然后将结果输出到`dist`目录。 **2. ...
vue的打包优化
Tonyhnv的博客
06-27 404
vue打包优化流程
Vue 项目开启gzip
qq_30193097的博客
09-01 2045
2、 对 webpack 配置打包压缩，并在服务端加上支持gizp的配置，当浏览器请求时，服务端直接将资源返回给浏览器。1、在服务端开启压缩，当浏览器发起请求时，服务端对传输资源进行实时压缩，然后返回给浏览器。第二种则是打包后的 dist 文件包体积比较大（因为包含 .gz 文件和源文件）第一种是服务端进行实时压缩，对服务器的性能消耗较大。首先，安装 compression 插件。如下图，看到响应头中出现。
性能优化实践：快速开启 Gzip 压缩
weixin_47516343的博客
06-21 4114
Gzip，全称为 GNU zip，是一种无损压缩文件的算法。其底采用的是 DEFLATE，而 DEFLATE 是 LZ77 与 哈夫曼编码 的一个组合体。 通常来说，“Gzip 压缩”的实现流程如下：
vue项目开启Gzip压缩配置方法及性能优化建议
H5爱好者
09-14 3401
原文地址：https://jingyan.baidu.com/album/454316ab29d0c0f7a7c03a1f.html?picindex=1 vue项目开启gzip压缩和部署 nginx开启gzip优化性能 第一步，在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩： npm install --save-dev compression-webpack-plugin 第二步，运行 npm run build打包项目，这时可能...
vue-cli4 配置 gzip 压缩
伍六七
08-08 4404
安装插件 npm i -D compression-webpack-plugin vue.config.js 配置 //引入该插件 const CompressionWebpackPlugin = require("compression-webpack-plugin") //匹配此 {RegExp} 的资源 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i module.exp...
vue使用gzip压缩和nginx配置
weixin_43100373的博客
06-04 858
vue.config.js配置 //安装compression-webpack-plugin npm i compression-webpack-plugin const CompressionPlugin = require("compression-webpack-plugin") configureWebpack: { plugins: [ new CompressionPlugin({ filename: '[path].gz[query]',
Vue项目开启gzip压缩
做GIS梦的人
08-26 3161
做了很多Vue项目，都有一个通病，随着代码越来越庞大，首页加载越来越慢，有时候出去演示，网络不好的时候，转半天，登录页面还没有出来。这主要是一些大的js文件造成的，这就是Vue的缺点吧，所有的代码都打包到一个JS文件里，网络传输太慢，有的项目都十几兆。 gzip的本质，个人觉得是在build的时候打包两份代码，一份压缩的，一份未压缩的，然后nginx在接收请求时，优先选择压缩后的格式返给客户端。 这里主要测试了使用gzip进行压缩，来压缩js和css文件大小，提升加载速度。 配置Vue项目 1.安装
vue项目docker nginx部署
03-14
Vue项目的Docker+Nginx部署可以通过以下步骤完成： 1. 创建Dockerfile：在Vue项目的根目录下创建一个名为Dockerfile的文件，内容如下： ``` # 使用Node作为基础镜像 FROM node:14 as build-stage # 设置工作目录 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值