web-dev-qa-db-fra.com

compression gzip et webpack

Je ne peux pas faire fonctionner gzip. Je veux faire des fichiers gzip à l'avance. Je le fais avec compression-webpack-plugin. J'utilise ces fichiers sur le serveur de la manière habituelle.

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

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

Et je référence ces fichiers dans mon 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>

Tout fonctionne si je ne gzip pas les fichiers, mais quand j'envoie des fichiers .gz, ça casse. Je lis que je devrais définir Content-Encoding: gzip et Content-Type et j'ai essayé, mais quel que soit le type de fichier contenu-contenu, je le mets à plaindre puisque j'envoie des fichiers css, js et texte. Je ne sais pas comment faire ce travail?

webpackcompressiongzip
5
Igor-Vuk

On dirait que vous avez déjà des fichiers .gz sur le serveur. Si vous voulez qu'Express les serve, vous avez besoin de quelque chose comme connect-gzip-static: https://github.com/pirxpilot/connect-gzip-static

Comment ça marche

Nous commençons par localiser tous les fichiers compressés (c.-à-d. Les fichiers avec les extensions .Gz et .br) dans le répertoire racine. Toutes les demandes HTTP GET et HTTP HEAD Avec l'en-tête Accept-Encoding défini sur gzip sont comparées à À la liste des fichiers compressés et, si possible, remplies en renvoyant Aux versions compressées. Si la version compressée n'est pas trouvée ou si la requête Ne possède pas d'en-tête Accept-Encoding approprié, la demande Est traitée de la même manière qu'un middleware statique standard le traiterait.

1
olore

D'après ce que je comprends, vous regroupez les fichiers, exécutez la compression pour obtenir la version .gz disponible, et votre HTML doit appeler la version NON-gzip.

Est-ce que cela vous montre ce que vous voulez?

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

EDIT

enlever le .gz

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

Raison: le navigateur indique au serveur s'il prend en charge GZip. Dans l'affirmative, il envoie la version .gz du fichier, sinon il envoie la version texte. Le navigateur décode le fichier et le charge dans le code HTML. Tout ce que vous voyez est la version décodée. 

Si le serveur envoie la version .gz, mais que le navigateur est endommagé, le fichier .gz n’est pas correctement créé.

0
Phillip Williams