时间戳

首页 > 解决方案 > HtmlWebpackPlugin 没有缩小脚本标签

webpack - HtmlWebpackPlugin 没有缩小脚本标签

问题描述

我正在使用具有以下设置的HtmlWebpackPlugin ：

new HtmlWebpackPlugin({
    template: 'src/index.ejs',
    minify: isDevelopment ? false : {
        caseSensitive: false,
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: false,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        removeScriptTypeAttributes: true,
        keepClosingSlash: false,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
        sortAttributes: true,
        sortClassName: true,
    },
}),

我相信它被转发到html-minifier-terser，但它没有压缩我的<script>标签。

HTML 和 CSS 被压缩，但不是我的 JS。

如何启用脚本压缩？

实际上并不完全正确，我不确定它在做什么。这个：

    <script>
        // TODO: compress this or move this or something
        if('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                // https://github.com/GoogleChrome/workbox/issues/1790
                navigator.serviceWorker.register('/service-worker.js').then(registration => {
                    console.info('SW registered: ', registration);
                }).catch(registrationError => {
                    console.error('SW registration failed: ', registrationError);
                });
            });
        }
    </script>

“压缩”到这个：

<script>// TODO: compress this or move this or something
        if('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                // https://github.com/GoogleChrome/workbox/issues/1790
                navigator.serviceWorker.register('/service-worker.js').then(registration => {
                    console.info('SW registered: ', registration);
                }).catch(registrationError => {
                    console.error('SW registration failed: ', registrationError);
                });
            });
        }</script>

即，它删除了一些空格，甚至可能只是来自collapseWhitespace选项。然而，这：

<script>if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js')</script>

将压缩为：

<script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/service-worker.js")</script>

所以它正在做某事，但我不知道是什么。当我在那里发表评论时，它不喜欢吗？

标签： webpackminifyhtml-webpack-plugin

解决方案

collapseWhitespace: true仅适用于 html 不适用于 JS。看看这里collapse_whitespace

我测试了你的案例，只是我将 minifyJS 更改为下面的那个。一切都被很好地压缩了，甚至是html中的脚本

new HtmlWebpackPlugin({
  template: 'src/index.ejs',
  minify: isDevelopment ? false : {
    caseSensitive: false,
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: false,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    removeScriptTypeAttributes: true,
    keepClosingSlash: false,
    minifyJS: { compress: { conditionals: false }}
    minifyCSS: true,
    minifyURLs: true,
    sortAttributes: true,
    sortClassName: true,
  },
}),

但是如果minifyJS: true那样的话代码像你一样中断问题是minifyJS: true它对脚本的干扰太多。看看有多少选项，它只是压缩，疯狂压缩选项:)

我自己从不压缩 html 脚本，原因很简单，就是它有太多问题。我总是设置minify: true默认给我们的：

{
   collapseWhitespace: true,
   removeComments: true,
   removeRedundantAttributes: true,
   removeScriptTypeAttributes: true,
   removeStyleLinkTypeAttributes: true,
   useShortDoctype: true
}

推荐阅读