Compressing gzip and webpack
I can't seem to get gzip to work. I want to make gzip files in advance. I do this using the compression-webpack-plugin. I use these files on the server in the usual way.
app.use(Express.static(path.join(__dirname, '../', 'dist')))
app.get('*', (req: Object, res: Object) => {
res.render('index')
})
And I am discarding these files in my templaate.
<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>
Everything works if I don't gzip the files, but when I send the .gz files it breaks. I read that I have to set Content-Encoding: gzip and Content-Type and I tried this, but any content type of content I submitted it complains as I am submitting css, js and text file. Not sure how to make this work?
source to share
From what I'm collecting, you collect the files, run compression to get the .gz version, and the HTML should call the NON-gzip version.
Does this mean what you want?
https://forum-archive.vuejs.org/topic/4059/adding-gzip-to-webpack-using-compression-plugin
EDIT
remove .gz
<script src="bundle.2720b1a98103167676ac.js"></script>
<script src="vendor.57erz1a981hk5786756u.js"></script>
Rreason: the browser tells the server if it supports GZip, if it does, it sends the .gz file version, otherwise it sends the text version. The browser decodes the file and loads it into html. All you see is the decoded version.
If the server is sending the .gz version, but it is corrupted in the browser, then the .gz file is not executed correctly.
source to share
It looks like you already have .gz files on your server. If you want Express to serve them you need something like connect-gzip-static: https://github.com/pirxpilot/connect-gzip-static
How it works
Let's start by finding all compressed files (ie .gz and .br files) in the root directory. All HTTP GET and HTTP HEAD requests with the Accept-Encoding header set to gzip are checked against the list of compressed files and, if possible, executed by returning compressed versions. If no compressed version is found, or if the request does not have a matching Accept-Encoding header, the request is processed in the same way that standard static middleware would handle it.
source to share