Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue Cli3 开启gzip打包及后台nginx配置

Vue Cli3 开启gzip打包及后台nginx配置

作者头像
飞奔去旅行
发布于 2020-04-14 06:34:37
发布于 2020-04-14 06:34:37
90400
代码可运行
举报
文章被收录于专栏:智慧协同智慧协同
运行总次数:0
代码可运行

vue配置文件中增加如下配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
configureWebpack: config => {
          if (process.env.NODE_ENV === 'production') {
                // gzip打包
                config.plugins.push(
                    new CompressionWebpackPlugin({
                        filename: '[path].gz[query]',
                        algorithm: 'gzip',
                        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                        threshold: 10240,
                        minRatio: 0.8
                    })
                );
            }
        },

增加了以上选项是为了让vue build 输出gzip文件,如果要站点生效,还需要配置nginx增加以下配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
gzip  on;
gzip_disable "msie6";
gzip_proxied any;
gzip_min_length 1k;
gzip_comp_level 4;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

搞定!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
nginx配置解决vue-cli3打包文件大,首次加载慢的问题
配置Vue 安装compression-webpack-plugin插件 npm i -D compression-webpack-plugin@3.0.0 在vue.config.js中添加如下配置 // 导入compression-webpack-plugin const CompressionWebpackPlugin = require('compression-webpack-plugin') // 定义压缩文件类型 const productionGzipExtensions = ['js',
全栈开发日记
2022/05/13
9140
【腾讯云前端性能优化大赛】亚军方案-前端首屏优化实践
大家好,前端性能优化是一个非常重要的问题,首屏时间长短,直接影响到用户的体验与留存。本文介绍一下优化过程的心路和历程。最终从2000ms优化到148ms。
conghuhu
2021/12/15
3K1
【腾讯云前端性能优化大赛】亚军方案-前端首屏优化实践
Vue项目初次访问慢的一种解决思路
将打包后的dist文件夹上传到服务器上部署(nginx、tomcat都可以,我的环境是nginx),访问:
行百里er
2022/03/30
2K0
Vue项目初次访问慢的一种解决思路
Nginx优化
业务运行:线上业务正常运行,承载了公司业务。 监控业务:通过监控业务对线上业务进行监控,及时发现问题。 优化业务:通过监控分析,发现业务问题或者瓶颈,及时对业务或者软件就行调整、优化。 测试优化:优化完成后,需要对现有的优化进行测试,保证业务在当前优化模式中稳定、高效,能够解决当前问题。 这就是业务运行的一个流程,也是我们保证业务稳定、高效、高可用的运维之道。
星哥玩云
2022/09/15
3170
Nginx优化
前端性能优化之gzip
HTTP 可以对传输的内容进行压缩,减少网络实际传输数据的大小。服务器会将资源进行压缩后传输到客户端,浏览器收到文件后进行解析。对于纯文本文件可以压缩到之前大小的30%-40%,大大提高了传输效率。
can4hou6joeng4
2023/11/29
4520
openssl生成自签的证书并且使用nginx配置https证书
终有链响
2024/07/29
8920
openssl生成自签的证书并且使用nginx配置https证书
Nginx优化配置详解
expires有个缺点就是如果更新WEB数据后,用户没有清理缓存,会看到旧的数据,因此建议将时间设置短一点
民工哥
2020/09/16
7270
如何通过gzip和nginx来提高网站打开速度及整体性能
要知道,网站的打开速度取决于浏览器打开下载的网页文件大小。如果传输的页面内容文件减少,那你网站的打开速度一定会加快。特别是手机端的用户,打开网站速度受限于移动端网络,所以压缩网站页面内容显得至关重要。
丢了的小白
2021/03/18
1.4K0
SPA应用部署时首屏启动慢问题解决方案
使用vuejs开发的单页应用,打包部署上线后,发现首屏启动时间达到了惊人的10s左右,于是开始优化,目前使用到的总结如下:
用户1141560
2018/07/31
7590
Nginx配置gzip加载优化
提升首页加载速度,浏览器对于同于网站下,允许同时加载的资源个数是有限的,chrome为6个还是7个,如果打包体积过大就会影响加载速度影响后面资源的加载。 因为我们环境上都是用的nginx因此我本地也是用的nginx做的测试,其他优化方法暂没有看。
用户7741497
2022/03/05
4760
Nginx 开启 gzip 压缩和缓存
为提高网站响应速度,我们可以开启 gzip 并且设置缓存,来达到网站优化,提升网站加载速度,减少宽带流量的消耗
hedeqiang
2019/12/17
2.1K0
Nginx开启资源压缩模块gzip
如果一个静态资源的Size越小,那么自然传输速度会更快,同时也会更节省带宽,因此我们在部署项目时,也可以通过Nginx对于静态资源实现压缩传输,一方面可以节省带宽资源,第二方面也可以加快响应速度并提升系统整体吞吐。
Petrochor
2023/04/01
1.4K0
Nginx开启资源压缩模块gzip
「简明性能优化」双端开启Gzip指南
在 http/1.0 协议中关于服务端发送的数据可以配置一个 Content-Encoding 字段,这个字段用于说明数据的压缩方法
前端劝退师
2019/09/17
1.6K0
「简明性能优化」双端开启Gzip指南
关于vue在首次加载时缓慢的解决办法,采用资源文件压缩的方式解决
简介 第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案,将资源文件压缩。
子润先生
2021/06/25
1.4K0
Nginx 静态压缩和代码压缩,提高访问速度!
但我们上班的心情,还是不能被这炎热的夏天所影响的,所以今天咋们来讲讲如何给前端访问加加速吧!!!
PHP开发工程师
2022/05/26
1.9K0
Nginx 静态压缩和代码压缩,提高访问速度!
Nginx服务器的压缩功能
在Nginx服务器配置文件中可以通过配置Gzip的使用,可以配置在http块,server 块或者location块中设置,Nginx服务器可以通过ngx_http_gzip_module模块、ngx_http_static_module 模块功能ngx_http_gunzip_module模块对这些指令进行分析和处理。今天看看ngx_http_gzip_module模块的使用
BUG弄潮儿
2020/06/15
1.8K0
Nginx服务器的压缩功能
【前端性能优化大赛精选文章】-首屏优化耗时实战
前言 事实上, 只有10%-20%的最终用户响应时间是发在从 Web 服务器获取 HTML 文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余 80%-90% 的最终用户体验。–Steve Souders 优化方法 项目技术栈: 框架:Vue2 。 打包工具:webpack 。 1.代码压缩 使用 gzip 压缩可以节省 50%-70% 的网络开销。 浏览器支持的压缩类型可以通过 network 的 Accept-Encoding: gzip, deflate 来查看。很多浏
腾讯云可观测平台
2022/01/26
6190
如何设置Nginx的Gzip压缩?
西里网
2025/04/21
1380
nginx gzip 压缩
Web 开发中需要的静态文件有:CSS、JS、字体、图片,可以通过 web 框架进行访问,但是效率不是最优的。 Nginx 对于处理静态文件的效率要远高于 Web 框架,因为可以使用 gzip 压缩协议,减小静态文件的体积加快静态文件的加载速度、开启缓存和超时时间减少请求静态文件次数。下面就介绍如何通过 Nginx 管理静态文件的访问,优化网站的访问速度。
数媒派
2022/12/01
1.3K0
Nginx Http块配置
特殊说明: 解决问题的光鲜,藏着磕Bug的痛苦。 万物皆入轮回,谁也躲不掉! 以上文章,均是我实际操作,写出来的笔记资料,不会出现全文盗用别人文章!烦请各位,请勿直接盗用!
收心
2022/01/19
4950
相关推荐
nginx配置解决vue-cli3打包文件大,首次加载慢的问题
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验