文档章节

vue cli3开启gzip,nginx配置直接使用已经压缩好的文件(文件名为加.gz)

hkaikai
 hkaikai
发布于 06/29 16:50
字数 433
阅读 322
收藏 2

前言:vue cli3的性能优化里面,开启gzip能得到很多的收益。通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件;当用nginx做服务器时,nginx通过_gzip on;_配置可对每个请求先压缩再输出,这样造成虚拟机浪费了很多cpu;而且webpack打包时已经生成了压缩文件,完全没必要重新通过nginx再压缩一下。发现这个问题后,通过半天的资料查询找到了答案:**nginx gzip static静态压缩,**下面把我解决的过程记录一下。

一、配置vue cli3 gzip

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: config => {
    // 开发环境不需要gzip
    if (process.env.NODE_ENV !== 'production') return
    config.plugins.push(
      new CompressionWebpackPlugin({
        // 正在匹配需要压缩的文件后缀
        test: /\.(js|css|svg|woff|ttf|json|html)$/,
        // 大于10kb的会压缩
        threshold: 10240
        // 其余配置查看compression-webpack-plugin
      })
    )
  }
}

二、安装nginx ngx_http_gzip_module模块

  • 先下载nginx

  • cd /nginx解压目录

  • ./configure --prefix=/usr/local/nginx --with-http_gzip_static_module

  • 上面的/usr/local/nginx为nginx安装目录,可根据自己喜好修改

  • make

  • make install

三、配置nginx

找到/usr/local/nginx/conf/nginx.conf,并添加下面代码

server {
    listen 4300;
    server_name localhost;
    location / {
        root /home/static/web/wechat;
        index /index.html;
        try_files $uri $uri/ /index.html;
        gzip_static on; #静态压缩
    }
}

启动nginx服务:./nginx -c /usr/local/nginx/conf/nginx.conf

四、查看效果

    1.打包后文件

 

    2. 浏览器访问资源结果

 

© 著作权归作者所有

hkaikai

hkaikai

粉丝 3
博文 14
码字总数 5984
作品 1
长沙
前端工程师
私信 提问
「简明性能优化」双端开启Gzip

1. 开启gzip压缩的好处是什么? 可以减小文件体积,传输速度更快。gzip是节省带宽和加快站点速度的有效方法。 服务端发送数据时可以配置 ,用户说明数据的压缩方式 客户端接受到数据后去检查...

前端劝退师
04/15
0
0
vue-cli3 项目框架优化(OneLine周分享)

Vue项目优化的背景 项目是通过vue-cli3 来构建的, 项目随着需求的不断增加. 代码量也在随着增大. 项目的文件大小也随着增加. 但是这一情况就变得,异常棘手. 我们也需要找到解决办法, 来处理这...

oneLine
03/12
0
0
「简明性能优化」双端开启Gzip指南

本文目录: 开启gzip压缩的好处 Webpack的 gzip设置 Nginx的 gzip设置 如何验证 gzip? 双端Gzip区别及其意义 1. 开启gzip压缩的好处 可以减小文件体积,传输速度更快。是节省带宽和加快站点...

前端劝退师
04/18
0
0
vue-cil 3.0 配置说明

1 安装vue-cli3.0 0 淘宝镜像 1 安装vue-cli 2 查看版本 3 vue-cli构建项目 选择默认即可、可起服务 4 目录结构 标准的vue目录结构 2 环境变量和模式 0 介绍 在npm下实际上vue-cli 启动的时候...

AsGiant
06/26
0
0
vue-cli3 项目从搭建优化到docker部署

项目地址 vue-cli3-project 欢迎 star 原文地址 www.ccode.live/lentoo/list… 1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的,可以跳过这一节,看下一节。 1.1 安装@vue/cli 等...

lentoo
01/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
10
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部