web-dev-qa-db-fra.com

Le paquet compressé gzip de Webpack n'est pas servi, le paquet non compressé est

J'essaie Webpack pour la première fois. J'utilise Gulp avec Browserify depuis un certain temps et je suis assez à l'aise avec cela. À ce stade, je teste juste quelques plugins Webpack. À savoir le plug-in compression-webpack. Je n'ai jamais utilisé de compression auparavant, alors soyez prudent si je commets une erreur inconnue.

Ci-dessous mon webpack.config.js. Le résultat est que je reçois un fichier main.js, main.js.gz, main.css et index.html. Le fichier main.js est injecté dans le fichier index.html, mais si j'ouvre le fichier index.html dans mon navigateur, il sert le fichier main.js non compressé, et non le fichier main.js.gz compressé. J'avais lu que je n'aurais pas besoin d'inclure l'extension .gz dans ma balise script et que le plug-in html-webpack-ne l'inclut pas. J'ai donc pensé que tout fonctionnait correctement, mais le fichier main.js non compressé est servi, plutôt que celui compressé.

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  entry: './app/scripts/main.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js',
    chunkFilename: '[id].js'
  },
  module: {
    loaders: [
      {test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')},
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: 'app/index.html',
      inject: 'body'
    }),
    new ExtractTextPlugin('[name].css'),
    new CompressionPlugin()
  ]
};
javascripthtmlcompressiongzipwebpack
9
Patrick Grimard

Pour charger main.js.gz au lieu de main.js dans le cas où main.js est inclus dans script- tag, vous devez configurer votre serveur Web (Apache, nginx, etc.).

Rappelez-vous que la configuration devrait charger .js.gz ou .js si le navigateur accepte gzip. Le serveur Web peut le vérifier dans l'en-tête de la requête HTTP Accept-Encoding: gzip, deflate

Dans le navigateur devtools, vous verrez dans tous les cas main.js. 

11
Dmitry Yaremenko

Vous pouvez facilement conditionner gzstatics facilement avec nginx gzip static module . Le serveur vérifie si le fichier app.js.gz contient par exemple /statics/app.js demandé est présent et le sert de manière transparente. Il n'est pas nécessaire de changer d'application ou de détecter Accept-Encoding - tout ce qui est géré par le module nginx. Voici l'extrait de configuration:

location /statics/ {
  gzip_static on;
}
5
gertas

Je suis un peu en retard sur ce fil, mais j'ai pensé ajouter mon 2c. J'ai généré un fichier gz à l'aide de Webpack, mais Apache a continué de servir le fichier non compressé (ou d'erreur s'il n'était pas présent), malgré le fait que Accept-Encoding ait été défini correctement. Il s'est avéré que je devais décommenter AddEncoding x-gzip .gz .tgz et recharger httpd. Pour mémoire, AddType application/x-gzip .gz .tgz était déjà défini et j'utilise Apache 2.4.6 avec Chrome 62. Merci à Dmitry ci-dessus de m'avoir invité à consulter mon fichier conf/httpd.conf.

0
Nate