• node.js koa2 如何使用gzip


    文章原文:https://www.cnblogs.com/yalong/p/14948533.html

    背景:

    项目中打包后的代码,体积过大,导致加载的时候很慢,特别影响用户体验,所以要对此优化,开启gzip压缩无疑是关键的一点

    使用gzip的前提

    web服务器和客户端(浏览器)必须共同支持gzip。
    即请求头的Accept-Language 包含 gzip, 返回头的Conten-Encoding 也包含 gzip
    目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如Apache,Nginx,IIS等同样支持gzip。

    Koa2开启gizp压缩

    首先安装 npm install koa-compress -S
    然后在koa2中配置:

        const koa = require('koa');
        const compress = require('koa-compress');
    
        const app = koa();
    
        const options = { threshold: 2048 };
        app.use(compress(options));
    

    但是这种方式,是node直接对源文件进行gzip压缩,虽然给客户端返回的是压缩后的资源,但是如果压缩的文件比较大的话,压缩的这个过程耗时是比较久的,可能会导致用户体验还不如不开启gzip压缩好。

    webpack开启gzip压缩

    由于现在大部分项目是基于webpack的, webapck本身是支持对静态资源进行gzip压缩的, 所以可以把这个耗时的工作交给webpack

    webpack配置开启gzip压缩

    代码如下:(具体参数含义可自行百度)

    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    
    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\.(js|css)$'),
          threshold: 10240,
          minRatio: 0.8
        })
    )
    

    如下图可以看到,打包后的文件下面,生成了同名的.gz 文件,文件体积明显减少了,前端同学只需要把这些文件一起上传到服务器即可

    koa2如何把.gz 文件返回给前端?

    如果使用node原生的话,需要判断服务器上是否有.gz文件,还要设置
    Content-Encodinggzip
    比较好的是,koa的 koa-static 默认自带对gzip文件的检测,基本原理就是对请求先检测.gz后缀的文件是否存在,再去根据结果返回不同的内容
    而且如果koa做服务器端的话,koa-static又是必须的,所以就不用做额外的配置了
    koa-static 的配置示例如下:

    app.use(require('koa-static')(path.join(__dirname, '..', 'dist')));
    

    如下图,打开浏览器的NetWork可以看到,请求的Accept-Language 包含 gzip, 返回头的Conten-Encodinggzip, 这样就通了,网站打开速度明显提升了

    gzip 压缩原理 请看这里:

    https://juejin.cn/post/6844903661575880717

  • 相关阅读:
    webpack 多页面支持 & 公共组件单独打包
    svn版本控制方案:多分支并行开发,多环境自动部署
    前端模块系统的演进
    gitignore 不起作用的解决办法
    js 中文长字符截短&关键字符隐藏 自定义过滤器
    UNION和UNION ALL
    @getMapping和@postMapping,@RestController
    java加密
    枚举浅谈
    NPE是什么
  • 原文地址:https://www.cnblogs.com/yalong/p/14948533.html
Copyright © 2020-2023  润新知