打包压缩 webpack + nginx 应结合使用

背景:

     前端打包后的文件,一般app.js和chunk-vendors.js比较大,浏览器加载时间较长,额外项目里有字体文件,字体包加载时间也较长

解决方案:压缩文件

     1、webpack压缩:使用compression压缩插件(不应用图片),在build时,将一个个满足条件的文件压缩成.gz文件并输出dist包

     2、nginx服务器压缩: 需要浏览器和服务器双方都支持,服务器端压缩,传到浏览器后浏览器解压并解析。目前的绝大多数浏览器都支持解析gzip过的页面。

 nginx开启gzip压缩

ngx_http_gzip_module是nginx默认集成的,不需要额外安装包,直接开启gzip即可,配置图如下:

  效果图,如下:

由上图可知,chunk-vendors.js原大小882kb,nginx开启gzip压缩后,浏览器加载压缩后的大小为292kb

并且我们查看响应头会看到gzip参数,如下所示

  nginx开启gzip的必要参数:gzip、gzip_types、gzip_min_length

参数说明:

gzip on; #开启gzip压缩功能
gzip_min_length 1k;
#设置允许压缩的页面最小字节数,页面字节数从header头的Content-Length中获取,默认值是0,表示不管页面多大都进行压缩,建议设置成大于1K,如果小于1K可能会越压越大
gzip_buffers 4 16k;
#压缩缓冲区大小,表示申请4个单位为16K的内存作为压缩结果流缓存,默认是申请与原始是数据大小相同的内存空间来存储gzip压缩结果;
gzip_http_version 1.1
#压缩版本(默认1.1 前端为squid2.5时使用1.0)用于设置识别HTTP协议版本,默认是1.1,目前大部分浏览器已经支持GZIP压缩,使用默认即可。
gzip_comp_level 2;
#压缩比率,用来指定GZIP压缩比,1压缩比最小,处理速度最快;9压缩比最大,传输速度快,但处理最慢,也消耗CPU资源
gzip_types  text/css text/xml application/javascript; 
#用来指定压缩的类型,“text/html”类型总是会被压缩,这个就是HTTP原理部分讲的媒体类型。
gzip_vary on;
#vary hear支持,该选项可以让前端的缓存服务器缓存经过GZIP压缩的页面,例如用缓存经过Nginx压缩的数据。

 

 问题:在gzip_types配置对图片和字体文件的支持后,浏览器加载到的资源并没有变小

 如上图所示:

logo图片原图片大小30kb,开启服务器的gzip压缩,没有变小,反而变大了,事实上,添加标头,压缩字典,并校验响应体实际上使它变得更大,如下图所示:压缩需要成本。Web服务器获得需要的内容,然后压缩它,最后将它发送到客户端。如果内容不能被进一步压缩,你只是在浪费CPU做无意义的任务。其次,采用HTTP压缩已经被过压缩的东西并不能使它更小。

HTTP压缩过程

 经调研,发现gzip有一个gzip_static 静态压缩

实现nginx检测到压缩文件,则直接使用,检测到非压缩文件则压缩

在前端代码打包构建bundle的时候,一般都有根据一定的算法自动压缩代码成gz文件的webpack插件;

gzip_static是会自动执行gz文件的,这样的就避免了通过gzip自动压缩;且服务器的压缩率小于webpack

 webpack开启gzip压缩

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

 2、在vue.config.js里配置,开启webpack压缩

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  ...
    configureWebpack: (config) => {
    // 为生产环境修改配置
    if (process.env.NODE_ENV === 'production') {
      // 为下列文件开启Gzip压缩,GZip压缩不适用于图片上
      config.plugins.push(
        new CompressionPlugin({
          test: /.js$|.html$|.json$|.svg$|.woff$|.ttf$|.css/, // 匹配文件名
          threshold: 1024, // 对超过1kb的文件进行压缩
          deleteOriginalAssets: true // 是否删除原文件
        })
      )
    }
  },
}

3、npm run build 即可看到打包的dist文件夹包含.gz文件,将dist包上传nginx服务器

4、ngxin服务器,nginx.conf文件配置   gzip_static on;  其它配置不动

 开启静态压缩后,效果图如下:

浏览器加载的是压缩过后的大小为239kb的chunk-vendors.js.gz,这样将本地的压缩文件上传服务器,减少了服务器压缩文件的cpu使用率,且节约了服务器压缩文件的时间,提高了效率

对于像图片,字体这样的也是使用webpack压缩,压缩后,上传服务器,服务器直接使用压缩后的文件,效果如下图:

原文地址:https://www.cnblogs.com/caofeng11/p/13935383.html