在站点配置添加如下代码:

    location ~* \.(css|js)$ {
gzip_static on;
}

这是 nginx 的静态 gzip功能,会自动查找对应扩展名的文件,如果存在 gzip 文件,就使用,如果没有就用原文件

配合 vue-cli 的构建工具,开启 config/index.js 中的

productionGzip: true

Vue默认没有安装相应webpack 插件,需要手动安装一下:

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

build 时会看到多打出很多 .gz 的包就ok啦~

refer: 论坛文章

nginx 开启静态 gzip 配合 Vue 构建的更多相关文章

  1. Nginx开启Gzip详解

    最近生产上发生了一些问题,原先所有的静态资源文件都是经过gzip压缩的,然而这几天突然都没有压缩了,经过一顿排查,发现是Nginx的配置有问题,借此机会详细了解了Nginx的Gzip配置. 1. Ng ...

  2. nginx 开启gzip压缩

    Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度,!  Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于 ...

  3. Nginx开启gzip压缩功能

    在Nginx安装完成之后,我们可以开启Gzip压缩功能,这里Nginx默认只能对text/html类型的文件进行压缩.下面的指令为开启Gzip的指令: gzip on; gzip_http_versi ...

  4. Nginx 开启gzip压缩(图片,文件,css)

    1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...

  5. nginx 开启GZIP、域名指向index.html

    nginx 虽然默认开启了gzip压缩,但是有关压缩文件.压缩效率没有开启,在建设我的(个人博客)[www.fayinme.cn]中,直观的感受到gzip带来的访问速度提升的快感. 如何开启GZIP ...

  6. nginx开启gzip压缩后导致apk包下载不能正常安装

    最后更新时间:2019/4/27 nginx一般都会开启gzip压缩,以提升传输性能. 配置如下: gzip on; gzip_comp_level 2; gzip_min_length 1k; gz ...

  7. Nginx开启Gzip压缩提升页面加载速度

    1.在 nginx 的conf 目录下新建 gzip.conf 文件 #开启gzip压缩 gzip on; #设置允许压缩的页面最小字节数 gzip_min_length 1k; #申请4个单位为16 ...

  8. nginx开启gzip的方法

    nginx开启gzip的方法 1.vi打开Nginx配置文件 <pre>vi /usr/local/nginx/conf/nginx.conf</pre> 2.找到如下一段,进 ...

  9. 使用 Nginx 搭建静态资源 web 服务器

    在搭建网站的时候,往往会加载很多的图片,如果都从 Tomcat 服务器来获取静态资源,这样会增加服务器的负载,使得服务器运行 速度非常慢,这时可以使用 Nginx 服务器来加载这些静态资源,这样就可以 ...

随机推荐

  1. selenium-server-standalone 和selenium-server, selenium-java的区别

    https://stackoverflow.com/questions/30865539/selenium-server-standalone-jar-vs-selenium-java-jar

  2. eclipse添加market ,maven

    添加market 转载自http://blog.csdn.net/buptdavid/article/details/42423247 Eclipse Marketplace是个插件应用商店,很实用的 ...

  3. HTML学习笔记Day5

    一.CSS属性 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器宽度:w ...

  4. 某些浏览器具有dns缓存功能,大家更改域名指向,建议清理下浏览器缓存

    最近遇到一个很郁闷的问题,在我们的的ngnix服务器上原来默认的网址需要更改.更改后,重启了ngnix.可是在客户端使用360浏览器打开网址.地址还是指向旧地址.直接输入服务器 IP地址转向了新地址, ...

  5. Luogu P2613 【模板】有理数取余

    题目链接 \(Click\) \(Here\) 真心没啥东西,只要能\(Get\)到在数字输入的时候按位取模,以及除数也可以直接取模就可以了.(把每个数看做乘法原理和加法原理构造起来的即可.) #in ...

  6. 关于 C# 中 Dictionary与Hashtable的性能测试

    https://www.cnblogs.com/qianxingdewoniu/p/5266243.html

  7. 温故知新 —— Floyd算法

    什么?Floyd?sb O(n ^ 3) 算法早不用了,右上角红叉吧.我之前虽然也认识过 Floyd 算法的重要性,不过多少也是这么想的.然而最近三天连续 rand 到了好几道有关的题目,让我彻底重新 ...

  8. bind,apply,call,caller,callee还傻傻分不清楚?

    先介绍每个的语法: 1. bind() 语法:fn.bind(thisObj[, arg1[, arg2[, ...]]]) fn:是想要改变this指向的函数 thisObj:表示fn中this指针 ...

  9. Sqlserver中的视图

    一.视图的基本知识 什么是视图:视图是从一个或多个表导出的虚拟的表,具有普通表的结构,物理上是不存在的.视图是动态的数据的集合,数据是随着基表的更新而更新. 视图的优点: ①在多表查询时,查询方便. ...

  10. Chrome DevTools: Color tricks in the Elements Panel

    shift + click to change the color format Tip one The Colour Platters are customeised for you .they s ...