CODEWITHSUNDEEP
webpackcompressiongzip
Igor-Vuk
Igor-Vuk

Reputation: 3797

gzip and webpack compression

I can not make gzip work. I wanna make gzip files beforehand. I do that with compression-webpack-plugin. I use this files on server the usual way.

app.use(Express.static(path.join(__dirname, '../', 'dist')))

app.get('*', (req: Object, res: Object) => {
  res.render('index')
})

And I refrence those 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 .gz files it breaks. I am reading that I should set Content-Encoding: gzip and Content-Type and I tried that but whatever file content-type I put it complains since I am sending css, js and text file. Don't know how to make this work?

Upvotes: 5

Views: 10775

Answers (2)

Phillip Williams
Phillip Williams

Reputation: 476

From what I gather, You bundle the files, run the compression to get the .gz version available, and you HTML should call the NON-gzip version.

Does this show you what you want ?

https://forum-archive.vuejs.org/topic/4059/adding-gzip-to-webpack-using-compression-plugin

EDIT

remove the .gz

  <script src="bundle.2720b1a98103167676ac.js"></script>
  <script src="vendor.57erz1a981hk5786756u.js"></script>

Reason: the browser tells the server if it supports GZip, if it does, it sends the .gz version of the file, else it sends the text version. The browser decodes the file, and loads it into the html. All you see is the decoded version.

If the Server is sends the .gz version, but it is broken at the browser then the .gz file is not correctly made.

Upvotes: 0

olore
olore

Reputation: 4847

It sounds like you already have .gz files on the server. If you want Express to serve them, you need to us something like connect-gzip-static: https://github.com/pirxpilot/connect-gzip-static

How it works

We start by locating all compressed files (ie. files with .gz and .br extensions) in root directory. All HTTP GET and HTTP HEAD requests with Accept-Encoding header set to gzip are checked against the list of compressed files and, if possible, fulfilled by returning the compressed versions. If compressed version is not found or if the request does not have an appropriate Accept- Encoding header, the request is processed in the same way as standard static middleware would handle it.

Upvotes: 2

Related Questions