压缩webpack插件 [英] Compression webpack plugin

问题描述

我正在尝试找出如何将 webpack-html-plugin 与压缩插件一起使用，后者的文档有点稀缺。

I'm trying to figure out how to properly use webpack-html-plugin with the compression plugin, the documentation of latter is a bit scarce.

我的webpack配置声明：

My webpack configuration declares :

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

压缩插件最后运行

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

最后，脚本已正确生成和压缩。

In the end the scripts are correctly produced and compressed.

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

我可以在 index.html 模板中声明预压缩文件的预加载

I can declare the preloading of the gzipped file in the index.html template

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

但是此行的插入由webpack负责：

But webpack is in charge for the insertion of this line :

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

$ c>

我如何要求webpack使用压缩脚本？

How can I ask webpack to use the compressed script ?

推荐答案

您不需要链接html中的压缩文件。您必须在服务器端执行此操作。您还可以gzip css和html文件。

You don't need to link a compressed file in html. You must do this server-side. You can also gzip css and html files.

将服务器设置为使用gzip压缩发送文件，还需要适当的标头来告诉浏览器如何解释

Set your server to send a file using gzip compression, you'll also need proper headers to tell the browser how to interpret that compressed file.

如果您使用的是Apache服务器，则可以通过 .htaccess 文件启用gzip压缩。

If you are using an Apache server you can enable gzip compression with an .htaccess file.

我将其用于我的Apache服务器：

I use this for my Apache server:

# 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

您可以在Google上搜索有关如何

You can google for more information on how to optimize a website with gzip compression.

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

这篇关于压缩webpack插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！