代码编织梦想

什么是gzip、有何用?

gzip是GNUzip的缩写,最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术,web服务器和客户端(浏览器)必须共同支持gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如Apache,Nginx,IIS同样支持gzip。

gzip压缩比率在3到10倍左右,可以大大节省服务器的网络带宽。而在实际应用中,并不是对所有文件进行压缩,通常只是压缩静态文件。
gzip工作原理图:
在这里插入图片描述
gzip的工作过程如下:
1)浏览器请求url,并在request header中设置属性accept-encoding:gzip。表明浏览器支持gzip。

2)服务器收到浏览器发送的请求之后,判断浏览器是否支持gzip,如果支持gzip,则向浏览器传送压缩过的内容,不支持则向浏览器发送未经压缩的内容。一般情况下,浏览器和服务器都支持gzip,response headers返回包含content-encoding:gzip。

3)浏览器接收到服务器的响应之后判断内容是否被压缩,如果被压缩则解压缩显示页面内容。

使用Gzip

用npm安装gzip插件

// 安装低版本
npm install --save-dev compression-webpack-plugin

在vue.config.js中配置

引入插件

//引入gzip压缩插件
const CompressionPlugin = require('compression-webpack-plugin')

使用插件,在vue.config.js文件中configureWebpack的plugins中添加配置new CompressionPlugin(…)或如下在最后加入

 configureWebpack:config => {
    if(process.env.NODE_ENV === "production"){
      return {
        plugins:[
          new CompressionPlugin({
            algorithm: 'gzip', // 使用gzip压缩
            test: /\.js$|\.html$|\.css$/, // 匹配文件名
            filename: '[path][base].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)
            minRatio: 0.8,
            threshold: 10240, // 对超过10k的数据压缩,一般都会选择大于1字节的进行压缩,小于1字节可能压缩后反而体积更大了
            deleteOriginalAssets: false, // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
          }),
        ]
      }
    }
  },

打包发布

插件导入后,npm run build打包,在dist文件夹中查看,可以看到.gz格式的文件

在这里插入图片描述

dist文件在IIS发布后,选择压缩

在这里插入图片描述

开启静态内容压缩

在这里插入图片描述

此时访问,可以看到浏览器,查看chunk.js的网络请求的回应,发现已经有了content-encoding的压缩回应,为gzip格式

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hhb442/article/details/129433168

关于vue项目的性能优化_挥别了青春的博客-爱代码爱编程_vue性能优化有哪些

   1. 合理使用v-if和v-show          v-if是真正的条件渲染,他的渲染机制是,直到第一次满足条件才会被渲染,条件不满足后又进行销毁。          v-show 则不管满不满足条件,都会被渲染,显示与否只是切换dom的display属性。          所以,一般v-if用于切换频率较少的场景,而v-show则适用于

Vue-cli3 开启gzip压缩-爱代码爱编程

开启 gzip 压缩 gzip 是 GNUzip 的缩写,最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术,web 服务器和客户端(浏览器)必须共同支持 gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如 Apache,Nginx,IIS 同样支持,

vue 打包部署后打开网页空白,找不到css、js等资源-爱代码爱编程

vue 打包部署后打开网页空白,找不到css、js等资源 1、修改config文件夹下的index.js文件 build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'

Vue 项目性能优化实践-爱代码爱编程

https://zhuanlan.zhihu.com/p/83180326 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要

Vue打包发布-爱代码爱编程

打包发布 理解打包 作用:用webpack把.vue,.less.js ----> 浏览器可直接执行的代码。 命令: npm run build 结果:内部集成了webpack,会在根目录下创建 /dist,在这个目录下创建打包完成的结果。 chunk:块 vendors代理商 app-hash值.js :主入口 chunk-vendo

vue项目打包加运行-爱代码爱编程

打包 3.0 public的文件夹 都打包到根目录了 打包之后的配置 去vue.config.js 自己手动配置 publicPath:"./" 打包 2.0 config下的index.js 配置生产环境的路径 build 改成相对路径, 自己找路径 assetsPublicPath: ‘./’, express静态托管打包后的dist文件 var

vue项目打包与配置-学习笔记-爱代码爱编程

文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试)打包手动配置文件打包压缩,大文件处理gzip进一步压缩打包app打包部署模式 vue项目打包与配置-学习笔记 前端打包 npm run build – package.json -- vue-cli-service build – 发布到线

利用gzip优化vue项目-爱代码爱编程

gzip简介安装前端压缩插件修改vue.config.js文件服务器端如何启用gzipnginx启用gziptomcat 启用gzipnode端启用gzip验证处理结果 gzip简介 HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术,web服务器和客户端(浏览器)必须共同支持gzip。目前主流的浏览器都支持该协议。 简

Vue 项目性能优化方案-爱代码爱编程

前言 Vue 框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效的 操作DOM;但Vue项目中仍然存在项目首屏优化,Webpack编译配置优化等问题, 主要从以下三个方面进行项目优: 1)Vue 代码层面的优化 2)webpack配置层面的优化 3)基础的web 技

vue 项目优化-爱代码爱编程

1.gzip压缩 gzip 是 GNUzip 的缩写,最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术,web 服务器和客户端(浏览器)必须共同支持 gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如 Apache,Nginx,IIS 同样支持,gz

Vue前端打包详细流程-爱代码爱编程

前端打包 添加打包命令运行打包代码打包指定不同的环境变量打包自定义文件移除三方包gzip压缩打包部署模式 添加打包命令 package.json中添加配置 npm run build 发布到线上的代码 不便于调试 命令: ①npm run build:dev 开发调式环境 ②npm run build:prod 线上调试环境 "

创新项目实训——vue项目部署优化之gzip压缩_mai゛的博客-爱代码爱编程

Gzip压缩的概念及用途 Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台。当应用Gzip压缩到一个纯文本文件时,效果是非常明显的,大约可以减少70%以上的文件大小。这取决于文件中的内容。 利用Apache中的Gzip模块,我们可以使用Gzip压缩算法来对Apache服务器发布的网页内容进行压缩后再传输到客户端浏览器。这样经

vue项目性能优化-总结_swjiejie的博客-爱代码爱编程

前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。 阐述三点

linux系统压缩打包 一. 文件归档与压缩 二. gzip打包与压缩 (压缩工具)三. zip打包与压缩 四. tar打包与压缩_小菜哈哈哈哈的博客-爱代码爱编程

1.文件归档与压缩1)什么是文件归档将多个文件或目录合并成为一个特殊的文件压缩是压缩单个文件 归档压缩是压缩多个文件(可以压缩/etc目录下所包含的所有文件) 归档压缩是压缩加普通归档2)为什么要对文件进行压缩? 当我们在传输大量的文件时,通常都会选择将该文件进行压缩,然后再进行传输。 首先:压缩后的文件会比压缩前的文件小。一个28G的文件夹压缩

【vue】项目打包部署到iis服务器中_vue项目发布到iis-爱代码爱编程

文章目录 一、 将Vue项目打包二 、URL 重写将该文件拷贝到打包好根目录下面来源 一、 将Vue项目打包 切换到项目目录下,输入cnpm run build 打包,后面可以接上"参数" ,

vue 发布文件压缩_vue 压缩-爱代码爱编程

介绍 compression-webpack-plugin它是一个Vue发布文件的压缩算法。针对Vue打包的文件过大,首屏加载过慢,通过compression-webpack-plugin生成指定的、体积更小的压缩文件,让