web-dev-qa-db-ja.com

圧縮webpackプラグイン

webpack-html-pluginをcompression pluginと一緒に適切に使用する方法を理解しようとしていますが、後者のドキュメントは少し不足しています。

私のwebpack構成は次のように宣言しています：

output: {
  filename: 'js/[name]-[hash].js',

圧縮プラグインがついに実行されます

new CompressionPlugin({
    asset: "[path].gz[query]",
    algorithm: "gzip"
})

最終的に、スクリプトは正しく作成および圧縮されます。

js/app-caf3b4b3.js.gz     382 kB          [emitted]  [big]

index.htmlテンプレートでgzip圧縮ファイルのプリロードを宣言できます

 <link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>.gz" as="script">

ただし、この行の挿入はwebpackが担当します。

<script type="text/javascript" src="/js/app-caf3b4b3.js">

<body></body>の内部

圧縮されたスクリプトを使用するようにwebpackに依頼するにはどうすればよいですか？

javascriptwebpackcompression
4
Flint

圧縮ファイルをhtmlでリンクする必要はありません。これはサーバー側で行う必要があります。 cssファイルとhtmlファイルをgzipで圧縮することもできます。

Gzip圧縮を使用してファイルを送信するようにサーバーを設定します。また、その圧縮ファイルの解釈方法をブラウザーに指示するための適切なヘッダーも必要です。

Apacheサーバーを使用している場合は、。htaccessファイルを使用してgzip圧縮を有効にできます。

私はこれをApacheサーバーに使用しています。

# enable the rewrite capabilities
RewriteEngine On

# prevents the rule from being overrided by .htaccess files in subdirectories
RewriteOptions InheritDownBefore

# provide a URL-path base (not a file-path base) for any relative paths in the rule's target
RewriteBase /

# GZIP
## allows you to have certain browsers uncompress information on the fly
AddEncoding gzip .gz
## serve gzip .css files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]
## serve gzip .js files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]
## serve gzip .html files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.html $1\.html\.gz [QSA]
## serve correct content types, and prevent mod_deflate double gzip
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.html\.gz$ - [T=text/html,E=no-gzip:1,E=is_gzip:1]
Header set Content-Encoding "gzip" env=is_gzip

gzip圧縮を使用してWebサイトを最適化する方法の詳細については、グーグルで検索できます。

https://gtmetrix.com/enable-gzip-compression.html

https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip

5
pldg

これは、Vue.jsアプリまたはサーバー側から Webpack Compression Plugin を介して行うことができます。 Vue appconfigについて回答します。

手順：

  1. まだ存在しない場合は、vue.config.jsファイルを作成します

  2. これらの線に沿って何かを追加します

    const CompressionWebpackPlugin = require("compression-webpack-plugin");

module.exports = {

  configureWebpack: {

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

      })
    ]
  }
};

プラグインドキュメントで利用可能なその他のオプション。

3
kushalvm