【express】使用 express 返回 gzip 的两种方式

落落叶叶无声

已于 2022-03-03 21:40:52 修改

阅读量1.4k

点赞数

于 2022-03-03 21:34:44 首次发布

本文链接：https://blog.csdn.net/u012557814/article/details/123264093

版权

其他专栏收录该内容

9 篇文章 0 订阅

订阅专栏

两种方式

使用 compression 中间件自动压缩 webpack 打包的 bundle.js
直接返回 webpack 压缩好的 bundle.js.gz

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Express gzip</title>
</head>
<body>
  <!--1. 使用 compression 中间件自动压缩 webpack 打包的 bundle.js-->
  <script src="/js/bundle.js"></script>
  <!--2. 直接返回 webpack 压缩好的 bundle.js.gz-->
  <script src="/js/bundle.js.gz"></script>
</body>
</html>

express app.js

const express = require('express')
const compression = require('compression') // #先安装 compression
const path = require('path')
const app = express()

// 1. 使用 compression 中间件压缩资源
app.use(compression({ filter: shouldCompress }))

// 2. 使用过滤器，判断哪些资源需要压缩
function shouldCompress (req, res) {
  // 2.1 如果请求 gzip 资源，跳过压缩，比如 /js/bundle.js.gz
  if (req.path.indexOf('.gz') !== -1) { 
    res.set('Content-Encoding', 'gzip') // 告诉浏览器服务器端返回 gzip 格式的资源
    return false
  }
  /* 2.2 如果请求非 gzip 资源，比如 /js/bundle.js, 则 compression 会自动
         帮我们压缩它并添加 Content-Encoding 为 gzip */
  return compression.filter(req, res)
}

// 静态访问路径
app.use(express.static('static'))

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'static/index.html'))
})


app.listen(3000, () => {
  console.log('已启动服务器，端口：3000')
})

结果验证

bundle.js（使用 express 的 compression 压缩为 gzip）
bundle.js.gz（使用 webpack 打包压缩过的 gzip）
大小对比（压缩率跟实际配置有关）

落落叶叶无声

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
【express】使用 express 返回 gzip 的两种方式

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫

专栏目录