web-dev-qa-db-ja.com

React、WebPack、Apacheを使用してテキスト圧縮を有効にします

おそらく compress-webpack-plugin それをすることになっています。

プラグインをNPMでインストールしました

npm install compression-webpack-plugin --save-dev
 _

そして私のwebpack.config.jsファイルを含めるように編集しました

const CompressionPlugin = require('compression-webpack-plugin');

...
  plugins: [
    new CompressionPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.(js|css)$/i,
    }),
...
 _

私が使用したとき Page Insights 私のWebページのロード速度を確認するには、GZファイルが認識されていないように見えます。またはそれらの少なくとも1つは認識されていません

enter image description here

これは私のメインディレクトリです

enter image description here

この質問 私の質問にかなり似ています。私はReactとWebPackで使用するのが最善のことではないと聞いたからですが、.htaccessを使用してください。おそらくこれは間違っていますか？

私はKushalvmの解決策を使ってみましたが、それは私のために働いていません。

reactjsapachewebpackgunziptext-comparison
10
Sam

時間gzipを構築することもできます。これがプロセスです。

  1. WebPack圧縮プラグインをインストールします

    nPMのインストールCompression-WebPack-Plugin --save-dev

  2. プラグインvarcompressplugin = required（ 'compression-webpack-plugin'）をインストールしてインポートします。

  3. プラグインの配列に追加します

  plugins: [
    new webpack.DefinePlugin({ 
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new CompressionPlugin({   <-- Add this
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
 _
  1. 最後に、このミドルウェアを追加して.js.gzを返すようにしてください。
app.get('*.js', function (req, res, next) {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  next();
});
 _
1
Talha Noyon