web-dev-qa-db-ja.com

Webpack gzip圧縮バンドルは提供されていません、非圧縮バンドルは提供されています

初めてWebpackを試しています。私はしばらくの間BrowserifyでGulpを使用していて、かなり快適です。この時点で、私はいくつかのWebpackプラグインをテストしています。つまり、compression-webpack-pluginです。私はこれまで圧縮を使用したことがないので、初心者の間違いを犯した場合は我慢してください。

以下は私のwebpack.config.jsです。その結果、main.js、main.js.gz、main.css、index.htmlが取得されます。 main.jsはindex.htmlに挿入されますが、ブラウザーでindex.htmlを開くと、圧縮されたmain.js.gzではなく、圧縮されていないmain.jsが提供されます。スクリプトタグに.gz拡張子を含める必要がなく、html-webpack-pluginに含まれていないことを読んだので、正常に機能していると思いましたが、圧縮されていないmain.jsが提供されています。圧縮されたものではなく。

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

script-タグにmain.js.gzが含まれている場合にmain.jsの代わりにmain.jsをロードするには、Webサーバー（Apache、nginxなど）を構成する必要があります。

設定は、ブラウザがgzipを受け入れるかどうかに応じて、.js.gzまたは.jsをロードする必要があることに注意してください。 WebサーバーはHTTPリクエストヘッダーでそれをチェックできますAccept-Encoding: gzip, deflate

ブラウザのdevtoolsでは、どのような場合でもmain.jsが表示されます。

11
Dmitry Yaremenko

nginx gzip static module を使用すると、条件付きでgz統計を簡単に提供できます。サーバーは、app.js.gzファイルかどうかをチェックします。要求された/statics/app.jsが存在し、透過的に提供されます。アプリケーションを変更したり、Accept-Encodingを検出したりする必要はありません-すべてがnginxモジュールによって処理されます。設定スニペットは次のとおりです。

location /statics/ {
  gzip_static on;
}
5
gertas

私はこのスレッドに少し遅れていますが、2cを追加すると思いました。 webpackを使用してgzファイルを生成しましたが、Accept-Encodingが正しく設定されているにもかかわらず、Apacheは非圧縮ファイルを提供し続けました（または存在しない場合はエラーが発生しました）。 AddEncoding x-gzip .gz .tgzのコメントを外して、httpdをリロードする必要がありました。記録のために、AddType application/x-gzip .gz .tgzはすでに設定されており、Apache2.4.6をChrome 62で使用しています。conf/ httpdを確認するように促してくれた上記のDmitryに感謝します。 confファイル。

0
Nate