性能优化gzip压缩

gzip压缩可以提升资源加载40%以上得性能。gzip压缩需要资源为.gz得文件。同时服务器需要设置开启gzip压缩。本文介绍webpack构建得项目中开启gzip压缩，以及nginx配置gzip。
如下是开启gzip压缩前后得网页加载对比

由上图可知，vendor的那个js加载时间从8.64s缩短到了4.82秒，可见gzip压缩对于性能提升的作用很大。

1、webpack开启gzip压缩

在打包配置文件中配置productionGzip：true,productionGzipExtensions:[‘js’, ‘css’],然后下面是webpack.prod.conf.js得配置

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')var env = config.build.envvar webpackConfig = merge(baseWebpackConfig, {module: {rules: utils.styleLoaders({sourceMap: config.build.productionSourceMap,extract: true})},devtool: config.build.productionSourceMap ? '#source-map' : false,output: {path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')},plugins: [// http://vuejs.github.io/vue-loader/en/workflow/production.htmlnew webpack.DefinePlugin({'process.env': env}),new webpack.optimize.UglifyJsPlugin({compress: {warnings: false},sourceMap: true}),// extract css into its own filenew ExtractTextPlugin({filename: utils.assetsPath('css/[name].[contenthash].css')}),// Compress extracted CSS. We are using this plugin so that possible// duplicated CSS from different components can be deduped.new OptimizeCSSPlugin({cssProcessorOptions: {safe: true}}),// generate dist index.html with correct asset hash for caching.// you can customize output by editing /index.html// see https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference},// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency'}),// split vendor js into its own filenew webpack.optimize.CommonsChunkPlugin({name: 'vendor',minChunks: function (module, count) {// any required modules inside node_modules are extracted to vendorreturn (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}}),// extract webpack runtime and module manifest to its own file in order to// prevent vendor hash from being updated whenever app bundle is updatednew webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']}),// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.build.assetsSubDirectory,ignore: ['.*']}])]
})if (config.build.productionGzip) {var CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,minRatio: 0.8}))
}if (config.build.bundleAnalyzerReport) {var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}module.exports = webpackConfig

至此，webpack打包已经开启gzip压缩了。打包完会根据配置生成.gz文件。

2、nginx开启gzip支持

http{
gzip  on; gzip_buffers 4 16k;gzip_comp_level 5;gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

nginx得配置文件nginx.conf加入如上配置即可开启

性能优化gzip压缩相关推荐

Nginx 性能优化 Gzip 压缩配置
一.分析 Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能! Gzip压缩作用:将响应报⽂发送⾄客户端之前可 ...
性能优化——图片压缩、加载和格式选择
本文首发于政采云前端团队博客:性能优化--图片压缩.加载和格式选择 https://www.zoo.team/article/images-compress 前言相信大家都听说过 "258 ...
WebAPI性能优化之压缩解压
有时候为了提升WebAPI的性能,减少响应时间,我们会使用压缩和解压,而现在大多数客户端浏览器都提供了内置的解压支持.在WebAPI请求的资源越大时,使用压缩对性能提升的效果越明显,而当请求的资源很小 ...
前端性能优化--合并压缩js，减少http请求次数
在我之前写的性能优化中,推荐大家使用雪碧图,压缩图片大小是一个方面,还有一个比较重要的方面就是,将图片放到一起了,降低了http的请求次数.今天这里我主要介绍大家在网站发布的时候,可以利用一些在线的合 ...
前端性能优化--nginx压缩
nginx 压缩功能,能减少文件的网络传输时间.也节省了所需要的带宽.压缩html.js.json.css.png等,可高达70%左右,单页应用提速效果明显. gzip压缩需要前端服务器同时配置 ...
Android性能优化——图片压缩的终极选择libjpeg-turbo
文章目录概述需求分析各种压缩方式 libjepg-turbo+jnigraphics 介绍编译使用引用文章概述之前在网络上搜索Android图片压缩,能看到各种各样的关于图片压缩的文章 ...
浅谈性能优化之图片压缩、加载和格式选择
原文链接:浅谈性能优化之图片压缩.加载和格式选择在认识图片优化前,我们先了解下 [二进制位数]与[色彩呈现]的关系. 二进制位数与色彩在计算机中,一般用二进制数来表示像素.在不同的图片格式中,像素 ...
webpack学习：性能优化
本文内容如下性能优化相关内容如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案性能优化两大方面一,开发环境性能优化优化: 构建速度,代码调试 HMR热模块更新(代码调试 ...
html压缩原理,webpack--前端性能优化与Gzip原理
目录前言前不久看过掘金小册<前端性能优化原理与实践>,受益匪浅."我深感性能优化实在是前端知识树中特别的一环--当你需要学习前端框架时,文档和源码几乎可以告诉你所有问题的答案 ...

性能优化gzip压缩

1、webpack开启gzip压缩

2、nginx开启gzip支持

性能优化gzip压缩相关推荐

最新文章

热门文章