使用vue打包时gzip压缩的两种方案

目录
  • 介绍两种gzip压缩的方式
    • webpack打包生成gz文件
    • 服务器在线gzip压缩
  • vue项目开启gzip压缩
    • 前端配置
    • 后端配置

开局一张图:

可以看出,在项目部署后,我们的资源文件请求都会保持原本大小,如果文件过大,并且很多的情况下,会导致网络请求耗时,严重点可能阻塞后面的进程。

介绍两种gzip压缩的方式

1、打包的时候通过webpack配置生成对应的 .gz 文件,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件;

2、浏览器请求xx.js文件时,服务器对xx.js文件进行gzip压缩后传输给浏览器。

webpack打包生成gz文件

安装插件(compression-webpack-plugin):

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

vue.config.js文件进行webpack配置(没有此文件可以在项目根路径创建一个文件):

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
        plugins: [
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)
                minRatio: 1, // 压缩率小于1才会压缩
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false, // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
            }),
        ],
    },
};

这里对js、html、css文件进行了压缩处理,并没有进行图片压缩,因为图片压缩并不能实际减少文件大小,反而会导致打包后生成很多同大小的gz文件,得不偿失。

当然了,上文提到过,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件,所以还需要在服务器配置一个属性,以期望它能正常返回我们需要的gz文件。

这里拿nginx举例(nginx.conf文件):

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    gzip_static on;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

其中gzip_static on这个属性是静态加载本地的gz文件。

看下效果:

gzip压缩比率在5-6倍,nginx配置了静态gz加载后,浏览器也返回的是gz文件,这样就会请求小文件而不会导致请求卡线程,并且,因为保留了源文件,所以当我们删除gz后,浏览器会自动去请求原始文件,而不会导致界面出现任何问题(如图二)。

静态加载gz文件主要是依托于下面的请求头:

服务器在线gzip压缩

前端不用进行任何配置,也不用webpack生成gz文件,服务器进行处理,拿nginx举例:

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    # 开启gzip
    gzip  on;

    # 设置缓冲区大小
    gzip_buffers 4 16k;

    #压缩级别官网建议是6
    gzip_comp_level 6;

    #压缩的类型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

上面有一些关于gzip的配置,首先是开启gzip,设置缓冲区大小,压缩的等级,需要压缩的文件等(如果需要更详细的配置,可以查看nginx的配置文档),看下效果:

响应头中会携带gzip压缩配置,每次请求xx.js文件,服务器都会进行实时压缩。

两种方案的优缺点:

1、webpack打包,然后直接使用静态的gz,缺点就是打包后文件体积太大,但是不耗服务器性能;

2、使用nginx在线gzip,缺点就是耗性能,需要实时压缩,但是vue打包后的文件体积小。

这里可能有些同学就要问题,我想在有gz文件的时候进行静态压缩,不存在gz文件的时候进行在线压缩而不是加载源文件,要怎么做呢?

简单,两种配置都写上即可。

gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;  

首先,gzip_static的优先级高,会先加载静态gz文件,当同目录下不存在此文件的时候,会执行在线压缩的命令。

有些小伙伴就会纳闷,既然都开启的情况下,我们怎么区分使用了静态加载还是在线压缩呢?

响应头的Content-Edcoding:gzip表示gzip压缩已经生效,而Etag中只有简单字符表示静态资源加载,而前面带 W/ 表示启动了在线压缩。

看下图:

就是两种gzip压缩的方案了。

vue项目开启gzip压缩

前端配置

拆完包之后,我们再用gzip做一下压缩 安装compression-webpack-plugin

// yarn add compression-webpack-plugin -D
// 在vue.congig.js中引入并修改webpack配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

后端配置

在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip,就发送给它gzip格式的文件 我的服务器是用express框架搭建的 只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())  // 在其他中间件使用之前调用

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue前端打包的详细流程

    目录 1.添加打包命令 2.运行打包代码 3.打包指定不同的环境变量 4.打包自定义文件 4.1 移除三方包 4.2 gzip压缩 5.打包发生错误: 1.添加打包命令 package.json中添加配置 npm run build 发布到线上的代码 不便于调试 命令: ①npm run build:dev 开发调式环境 ②npm run build:prod 线上调试环境 "build:dev": "vue-cli-service build --mode dev"

  • Vue CLI3 开启gzip压缩文件的方式

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

  • vue项目开启Gzip压缩和性能优化操作

    vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能 第一步:在vue项目中安装依赖并将productionGzip改为true,开启Gzip压缩: npm install --save-dev compression-webpack-plugin 第二步:运行 npm run build打包项目,这时可能会报错,提示ValidationError: Compression Plugin Invalid Options. 根据官网提示,需要将CompressionWebpac

  • Vue项目打包压缩的实现(让页面更快响应)

    影响网页响应速度的因素有很多,例如:http请求次数太多.服务器本身处理请求太久.请求内容太大.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长. 我的一个小项目,仅有三四个页面,但因为服务器带宽太小了,加载时间过长的问题尤为明显,于是采用路由懒加载和gzip压缩的方式优化了一下,访问速度得到了显著提升. 一.路由懒加载:分割代码块 Vue支持异步组件,

  • 使用vue打包时gzip压缩的两种方案

    目录 介绍两种gzip压缩的方式 webpack打包生成gz文件 服务器在线gzip压缩 vue项目开启gzip压缩 前端配置 后端配置 开局一张图: 可以看出,在项目部署后,我们的资源文件请求都会保持原本大小,如果文件过大,并且很多的情况下,会导致网络请求耗时,严重点可能阻塞后面的进程. 介绍两种gzip压缩的方式 1.打包的时候通过webpack配置生成对应的 .gz 文件,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件: 2.浏览器请求xx.js文件时,服务器

  • 解决Jquery load()加载GB2312页面时出现乱码的两种方案

    问题描述:jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. a.php 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(function(){ $("#zz").click(function(){ $("#job").load("b.php"); }) }) <

  • vue打包添加gzip配置项方式

    目录 vue打包添加gzip配置项 关于我写这篇文章的原因 vue3.0配置gzip 及 资源404 第一步:vue.config.js 第二步:这里使用 nginx 进行配置 vue打包添加gzip配置项 安装 compression-webpack-plugin 这边我选用的是6.1.1版本 npm install compression-webpack-plugin@6.1.1 或者 yarn add compression-webpack-plugin@6.1.1 之后在vue.conf

  • vue-cli3打包时图片压缩处理方式

    目录 vue-cli3打包时图片压缩 例如 代码如下 vue-cli3压缩图片配置 安装image-webpack-loader插件 在vue.config.js当中进行配置 vue-cli3打包时图片压缩 当我们在 JavaScript.CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中. 在其编译过程中,所有诸如 <img src="...">.background: url(...)

  • 使用vue打包时vendor文件过大或者是app.js文件很大的问题

    第一次使用vue2.0开发,之前都是用的angular1.x.在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右..后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致文件很大. 我的解决办法: 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: 然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码 externals: { '

  • vue打包上传服务器刷新404问题的两种方案

    一:nginx服务器解决方案,修改   .conf  配置文件 有两种解决方案 1: location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 2: location / { error_page 404 /index.html; #try_file $uri $uri/ /index.html =404; } 二:apach

  • 关于vue打包时的publicPath就是打包后静态资源的路径问题

    情况一 当不配置vue.config.js或者没有publicPath属性时,默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败,把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了(注意重启wamp) 情况二 当配置为当前目录’./’ 访问正常,其实publicPath当前目录即打包后的index.html的当前目录,即dist目录,怎么证明,把publicPath的值设置为’…/’,看看情况三 情况三 又报错,把js,css等静态文件复制

  • iOS实现图片压缩的两种方法及图片压缩上传功能

    两种压缩图片的方法:压缩图片质量(Quality),压缩图片尺寸(Size). 压缩图片质量 NSData *data = UIImageJPEGRepresentation(image, compression); UIImage *resultImage = [UIImage imageWithData:data]; 通过 UIImage 和 NSData 的相互转化,减小 JPEG 图片的质量来压缩图片.UIImageJPEGRepresentation:: 第二个参数 compressi

随机推荐