翼度科技»论坛 编程开发 JavaScript 查看内容

vue项目打包开启gzip压缩具体使用方法

2

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
使用前



使用后



方法

webpack配置Compression-webpack-plugin压缩gzip文件
作用:提升网络传输率->优化web页面加载时间

基本原理


  • 浏览器请求资源文件时会自动带一个Accept-Encoding的请求头告诉服务器支持的压缩编码类型
  • 服务器配置开启gzip选项:接收客户端资源文件请求,查看请求头Content-encoding支持的压缩编码格式,如果是包含gzip那么在每次响应资源请求之前进行gzip编码压缩后再响应返回资源文件(在响应头会带上Content-encoding: gzip)
  • 浏览器接收到响应后查看请求头是否带有Content-encoding:gzip,如果有进行对返回的资源文件进行解压缩然后再进行解析渲染

具体使用


1.安装插件
  1. npm install --save-dev compression-webpack-plugin
复制代码
2.配置插件
  1. const CompressionPlugin = require('compression-webpack-plugin');
  2. const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
  3. module.exports = {
  4.     publicPath: './',
  5.     productionSourceMap: false,
  6.     configureWebpack: {...},
  7.     chainWebpack: config => {
  8.         config.resolve.alias.set('@', resolve('src'));
  9.         if (process.env.NODE_ENV === 'production') {
  10.             config.plugin('compressionPlugin')
  11.             .use(new CompressionPlugin({
  12.                 filename: '[path].gz[query]',
  13.                 algorithm: 'gzip',
  14.                 test: productionGzipExtensions,
  15.                 threshold: 10240,
  16.                 minRatio: 0.8,
  17.                 deleteOriginalAssets: true
  18.             }));
  19.         }
  20.     },
  21. };
复制代码
或者
  1. const CompressionPlugin = require("compression-webpack-plugin");
  2. const productionGzipExtensions = ['js', 'css']
  3. module.exports = {
  4. configureWebpack: {
  5.     // provide the app's title in webpack's name field, so that it can be accessed
  6.     // in index.html to inject the correct title.
  7.     name: name,
  8.     resolve: {
  9.       alias: {
  10.         '@': resolve('src'),
  11.       },
  12.     },
  13.     plugins: [
  14.       new webpack.ProvidePlugin({
  15.         $: 'jquery',
  16.         jQuery: 'jquery',
  17.         'windows.jQuery': 'jquery',
  18.       }),
  19.       new CompressionPlugin({
  20.         algorithm: 'gzip',
  21.         test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
  22.         threshold: 10240,
  23.         minRatio: 0.8
  24.       })
  25.     ],
  26.   }
  27. }
复制代码
3.nginx配置
  1. http {
  2.   gzip on; #on为启用,off为关闭
  3.     gzip_static on;
  4.     gzip_min_length 1k; #设置允许压缩的页面最小字节数,页面字节数从header头中的Content-Length中进行获取。默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大。
  5.     gzip_buffers 4 32k; #获取多少内存用于缓存压缩结果,‘4 16k'表示以16k*4为单位获得
  6.     gzip_http_version 1.1; #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
  7.     gzip_comp_level 2; #gzip压缩比(1~9),越小压缩效果越差,但是越大处理越慢,所以一般取中间值;
  8.     gzip_types text/plain application/x-javascript text/css application/xml;#对特定的MIME类型生效,其中'text/html'被系统强制启用
  9.     gzip_vary on; #启用应答头"Vary: Accept-Encoding"
  10.     gzip_disable "MSIE [1-6].";#配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
  11. }
复制代码
以上就是vue项目打包开启gzip压缩具体使用方法的详细内容,更多关于vue打包开启gzip压缩的资料请关注脚本之家其它相关文章!

来源:https://www.jb51.net/javascript/292106ed7.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具