node.js koa2 如何使用gzip
<p>文章原文：https://www.cnblogs.com/yalong/p/14948533.html</p><h4 id="背景">背景：</h4>
<p>项目中打包后的代码，体积过大，导致加载的时候很慢，特别影响用户体验，所以要对此优化，开启gzip压缩无疑是关键的一点</p>
<h4 id="使用gzip的前提">使用gzip的前提</h4>
<p>web服务器和客户端（浏览器）必须共同支持gzip。<br>
即请求头的<code>Accept-Language</code> 包含 <code>gzip</code>, 返回头的<code>Conten-Encoding</code> 也包含 <code>gzip</code><br>
目前主流的浏览器，Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS等同样支持gzip。</p>
<h4 id="koa2开启gizp压缩">Koa2开启gizp压缩</h4>
<p>首先安装 <code> npm install koa-compress -S</code><br>
然后在koa2中配置：</p>
<pre><code> const koa = require('koa');
const compress = require('koa-compress');
const app = koa();
const options = { threshold: 2048 };
app.use(compress(options));
</code></pre>
<p>但是这种方式，是node直接对源文件进行gzip压缩，虽然给客户端返回的是压缩后的资源，但是如果压缩的文件比较大的话，压缩的这个过程耗时是比较久的，可能会导致用户体验还不如不开启gzip压缩好。</p>
<h4 id="webpack开启gzip压缩">webpack开启gzip压缩</h4>
<p>由于现在大部分项目是基于webpack的， webapck本身是支持对静态资源进行gzip压缩的， 所以可以把这个耗时的工作交给webpack</p>
<h4 id="webpack配置开启gzip压缩">webpack配置开启gzip压缩</h4>
<p>代码如下：(具体参数含义可自行百度)</p>
<pre><code>const CompressionWebpackPlugin = require('compression-webpack-plugin');
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '.gz',
algorithm: 'gzip',
test: new RegExp('\\.(js|css)$'),
threshold: 10240,
minRatio: 0.8
})
)
</code></pre>
<p>如下图可以看到，打包后的文件下面，生成了同名的.gz 文件，文件体积明显减少了，前端同学只需要把这些文件一起上传到服务器即可</p>
<p><img src="https://img2020.cnblogs.com/blog/872412/202106/872412-20210629094431887-1991972220.jpg"></p>
<h4 id="koa2如何把gz-文件返回给前端">koa2如何把.gz 文件返回给前端？</h4>
<p>如果使用node原生的话，需要判断服务器上是否有<code>.gz</code>文件，还要设置<br>
<code>Content-Encoding</code> 为 <code>gzip</code><br>
比较好的是，koa的 <code>koa-static</code> 默认自带对<code>gzip</code>文件的检测，基本原理就是对请求先检测<code>.gz</code>后缀的文件是否存在，再去根据结果返回不同的内容<br>
而且如果koa做服务器端的话，<code>koa-static</code>又是必须的，所以就不用做额外的配置了<br>
<code>koa-static</code> 的配置示例如下：</p>
<pre><code>app.use(require('koa-static')(path.join(__dirname, '..', 'dist')));
</code></pre>
<p>如下图，打开浏览器的NetWork可以看到，请求的<code>Accept-Language</code> 包含 <code>gzip</code>, 返回头的<code>Conten-Encoding</code> 是<code>gzip</code>, 这样就通了，网站打开速度明显提升了</p>
<p><img src="https://img2020.cnblogs.com/blog/872412/202106/872412-20210629094531512-549982869.jpg"></p>
<h4 id="gzip-压缩原理-请看这里">gzip 压缩原理 请看这里:</h4>
<p>https://juejin.cn/post/6844903661575880717</p>
<h4 id="7月21日新增">7月21日新增：</h4>
<p>如果 <code>koa-static</code> 和<code>koa-static-cache</code> 一起使用的话， koa-static-cache 要放在 koa-static 后面</p>
<pre><code>app.use(require('koa-static')(path.join(__dirname, '..', 'fe/dist')));
app.use(
staticCache(path.join(__dirname, '..', 'fe/dist'), {
maxAge: 1 * 24 * 60 * 60, // 缓存一天
}),
);
</code></pre>
<p>如果这俩位置互换，gzip就是用不了了</p><br><br>
来源：https://www.cnblogs.com/yalong/p/14948533.html
頁:
[1]