HtmlWebpackPlugin不缩小脚本标签

问题描述 投票:0回答:2

我在以下设置中使用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>

所以它[[是正在做某事,但我不知道该怎么办。当我在其中发表评论时,感觉不一样吗?

webpack minify html-webpack-plugin
2个回答
1
投票
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过多干扰了脚本。看看有多少选择,只是压缩,精神错乱compress-options:)

我从来没有自己压缩过html脚本,原因很简单,那就是它有太多问题。我总是设置minify: true,默认情况下会给我们:

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

0
投票
new HtmlWebpackPlugin({ template: 'src/index.ejs', showErrors: isDevelopment, minify: isDevelopment ? false : { caseSensitive: false, removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: false, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, removeScriptTypeAttributes: true, keepClosingSlash: false, minifyJS: code => Terser.minify(code).code, // <-- call it manually minifyCSS: true, minifyURLs: true, sortAttributes: true, sortClassName: true, }, }),
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.