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

    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. Codeforces Round #523 (Div. 2) C Multiplicity (DP)

    传送门 https://www.cnblogs.com/violet-acmer/p/10005351.html 题意: 给定一数组a[],从a[ ]中除去任意个元素得到b[ ],求能形成多少“好序列 ...

  2. 原生JS实现$.ajax

    function ajax(obj){ obj=obj||{}; obj.type=(obj.type||'GET').toUpperCase(); obj.dataType=obj.dataType ...

  3. python学习笔记:python异常的调用原理

    因为错误是class,捕获一个错误就是捕获到该class的一个实例.因此,错误并不是凭空产生的,而是有意创建并抛出的.Python的内置函数会抛出很多类型的错误,我们自己编写的函数也可以抛出错误. h ...

  4. Codeforces Gym 191033 E. Explosion Exploit (记忆化搜索+状压)

    E. Explosion Exploit time limit per test 2.0 s memory limit per test 256 MB input standard input out ...

  5. PHP工厂方法模式

    此模式中,通过定义一个抽象的核心工厂类,并定义创建产品对象的接口,创建具体产品实例的工作延迟到其工厂子类去完成.这样做的好处是核心类只关注工厂类的接口定义,而具体的产品实例交给具体的工厂子类去创建.当 ...

  6. Luogu P1247 取火柴游戏

    题目链接 \(Click\) \(Here\) 这个题目其实就是一个\(Nim\)游戏的简单模型.对于单个的\(Nim\)游戏(单独一堆的情况),数学归纳可证其\(SG\)函数值等于其石子个数.所以对 ...

  7. Luogu P2580 于是他错误的点名开始了 Trie树 字典树

    字典树裸题.每次插入询问串,查询的时候拿出来直接查,信息保留在节点上. #include <bits/stdc++.h> using namespace std; char s[51]; ...

  8. 简单贪心) Repair the Wall hdu2124

    Repair the Wall http://acm.hdu.edu.cn/showproblem.php?pid=2124 Time Limit: 5000/1000 MS (Java/Others ...

  9. mysql视图、触发事务、存储过程

    视图 视图是一个虚拟表(非真实存在的),其本质就是根据SQL语言获取动态的数据集,并为其命名,用户使用时只需要使用名称即可获得结果集,可以将结果集当做表来使用. 视图是存在数据库中的,如果我们程序中使 ...

  10. 关于SSM的小感悟

    这周用SSM框架写了个小项目,真是各种百度啊,最后总算是实现了个登陆功能.刚才一直在修改,想实现登陆进去可以对id进行搜索,出现搜索的整体数据,无奈,一直没能实现.所以就只能留到下周了,到时候会把这个 ...