新手上路，请多包涵

我想弄清楚如何正确使用 webpack-html-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 使用压缩脚本？

原文由 Flint 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript webpack compression

阅读 335

2 个回答

得票最新

社区维基

发布于
2022-12-15

✓ 已被采纳

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

将您的服务器设置为使用 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

您可以通过 google 获取有关 如何使用 gzip 压缩优化网站 的更多信息。

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

原文由 pldg 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-12-15

您可以通过 SPA 应用程序或服务器端的 Webpack 压缩插件来执行此操作。我将回答我测试过的 Vue.js spa 的配置。除了配置文件名外，React 和 Angular webpack 没有什么不同。

脚步：

创建一个 vue.config.js 文件（如果不存在）
沿着这些线添加一些东西

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

   module.exports = {

     configureWebpack: {

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

         })
       ]
     }
   };

插件文档中提供了更多选项。

原文由 HalfWebDev 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

压缩 webpack 插件

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译