gzip和webpack压缩
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gzip和webpack压缩相关的知识,希望对你有一定的参考价值。
我不能让gzip工作。我想事先制作gzip文件。我用compression-webpack-plugin做到了。我通常在服务器上使用这些文件。
app.use(Express.static(path.join(__dirname, '../', 'dist')))
app.get('*', (req: Object, res: Object) => {
res.render('index')
})
我在模板中引用这些文件。
<head>
<meta charset="UTF-8" />
<title>Q</title>
<link rel='stylesheet' type='text/css' href="stylesLocal.29kf81a60pl57850llfi.js.gz">
</head>
<body>
<div id="app"><%- app %></div>
<script src="bundle.2720b1a98103167676ac.js.gz"></script>
<script src="vendor.57erz1a981hk5786756u.js.gz"></script>
</body>
</html>
如果我没有gzip文件但是当我发送.gz文件时,一切都有效。我正在读取我应该设置Content-Encoding:gzip和Content-Type,我尝试了但是无论文件内容类型如何我都抱怨它,因为我发送css,js和文本文件。不知道如何使这项工作?
听起来你已经在服务器上有.gz文件了。如果你想让Express为他们服务,你需要我们像connect-gzip-static:https://github.com/pirxpilot/connect-gzip-static
How it works
我们首先在根目录中找到所有压缩文件(即带.gz和.br扩展名的文件)。将Accept-Encoding标头设置为gzip的所有HTTP GET和HTTP HEAD请求都根据压缩文件列表进行检查,如果可能,通过返回压缩版本来完成。如果未找到压缩版本或请求没有适当的Accept-Encoding标头,则处理请求的方式与标准静态中间件处理它的方式相同。
从我收集的内容中,您捆绑文件,运行压缩以获得.gz版本,并且HTML应该调用NON-gzip版本。
这会告诉你你想要的吗?
https://forum-archive.vuejs.org/topic/4059/adding-gzip-to-webpack-using-compression-plugin
编辑
删除.gz
<script src="bundle.2720b1a98103167676ac.js"></script>
<script src="vendor.57erz1a981hk5786756u.js"></script>
原因:浏览器告诉服务器它是否支持GZip,如果支持,则发送文件的.gz版本,否则发送文本版本。浏览器解码文件,并将其加载到html中。你看到的只是解码版本。
如果服务器发送.gz版本,但它在浏览器中断开,那么.gz文件没有正确生成。
以上是关于gzip和webpack压缩的主要内容,如果未能解决你的问题,请参考以下文章
Webpack项目优化之CDN加速Gzip压缩和SplitChunks拆分