如何使用gzip压缩加快页面显示速度

1、首先我们通过npm命令安装好需要使用的依赖包

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

2.安装成功了之后我们需要在vue.config.js里面引入

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

3.引用之后我们还需要在vue.config.js的module.exports配置configureWebpack

module.exports = {publicPath: './',lintOnSave: true,productionSourceMap: false,configureWebpack: {plugins: [new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/,threshold: 10240,minRatio: 0.8})],},devServer: {port: 1888,proxy: {'/api': {//服务地址target: '',ws: true,pathRewrite: {'^/api': '/api/'}},}},chainWebpack: (config) => {//忽略的打包文件config.externals({'vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios','element-ui': 'ELEMENT',})const entry = config.entry('app')entry.add('babel-polyfill').end()entry.add('classlist-polyfill').end()entry.add('@/mock').end()}
}

4.然后使用npm run build进行打包你会看到生成了带有.gz的文件，说明压缩成功了

5.到这里，前端做的操作就基本结束了，然后我们需要告诉运维配置下Nginx配置gzip压缩,配置类型如下

6.配置完了之后我们可以把我们打好包的进行发版操作，然后通过游览器的控制台看看是否已经好了，如果显示content-Encoding如下图所示就说明，就说可以了，这时我们发现第一次运行速度果然变快了

以上就是我在项目中实际用到具体操作，希望对大家有所帮助，也欢迎大佬们提出宝贵的意见，谢谢!

如何使用gzip压缩加快页面显示速度相关推荐

Nginx性能优化功能- Gzip压缩(大幅度提高页面加载速度)
Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能! Web网站上的图片,视频等其它多媒体文件以及大文件,因 ...
提高页面显示速度的秘技
在安排Web页面的布局时,最常用的方法之一是用HTML表格界定页面的结构.例如,假设Web页面由顶端的导航条和它下面的两栏(列)构成--左边的列是一个导航条,右边的列是实际安置内容的区域.对于这样一个 ...
IIS6.0下配置HTTP Gzip压缩提高iis相应速度
转载之西部e网一. HTTP压缩概述 HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法.HTTP压缩采用通用的压缩算法如gzip等压缩HTML.JavaScript 或 CSS文件.压 ...
node js并发加载页面缓慢_详解如何利用前端Node模块zlib开启gzip压缩使页面加载速度更快...
前言这篇文章我们来聊一聊Node的原生模块zlib,它的主要作用是压缩和解压缩数据,我们都知道数据在压缩后可以减小体积,在网络传输时提高传输速度和节约带宽! API用法 zlib这个模块提供了很多的 ...
Nginx优化与防盗链（隐藏版本号、配置缓存时间、日志分割、修改进程数、配置连接超时、使用gzip压缩页面、防盗链设置，fpm优化）
文章目录隐藏Nginx版本号网页压缩网页压缩配置网页缓存时间网页缓存时间设置更改Nginx运行进程数连接超时 nginx防盗链设置盗链网站配置httpd 日志分割 fpm参数优化隐 ...
提高页面载入速度简单易行的四个办法。
1.去掉页面中不用的JS.CSS引用. 2.降低页面连接数,即降低请求server的次数. 3.配置GZIP.对页面进行压缩,加快页面从server到浏览器的传输速度. 4.检查页面查询SQL是否使用 ...
Linux gzip压缩输出
一.gzip介绍 gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式.软件的作者是Jean-loup Gailly和Mark Adler.1992 ...
Apache PHP 的gzip压缩输出的实现方法
一.gzip介绍 gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式.软件的作者是Jean-loup Gailly和Mark Adler.1992 ...
apache php gzip压缩输出的实现方法
一.gzip介绍 gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式.软件的作者是Jean-loup Gailly和Mark Adler.1992 ...

如何使用gzip压缩加快页面显示速度

如何使用gzip压缩加快页面显示速度相关推荐

最新文章

热门文章