HtmlWebpackPlugin не минимизирует тег сценария - PullRequest
Новая
       87

HtmlWebpackPlugin не минимизирует тег сценария

0 голосов
/ 22 марта 2020

Я использую 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>

Так что что-то делает, но я не знаю, что. Разве не нравится, когда у меня есть комментарии?

Ответы [ 2 ]

1 голос
/ 22 марта 2020

collapseWhitespace: true работает только на html, значительно не работает на JS. Взгляните сюда collapse_whitespace

Я проверил ваш случай, только я изменил minify JS на приведенный ниже. И все хорошо сжимается, даже сценарий в 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, которая слишком сильно мешает сценарию. Посмотрите, сколько существует вариантов, и это просто сжатие, безумие compress-options :)

Я никогда не сжимаю скрипт html самостоятельно по той простой причине, что проблем слишком много с Это. Я всегда устанавливаю minify: true, что по умолчанию дает нам: 

{
   collapseWhitespace: true,
   removeComments: true,
   removeRedundantAttributes: true,
   removeScriptTypeAttributes: true,
   removeStyleLinkTypeAttributes: true,
   useShortDoctype: true
}
0 голосов
/ 23 марта 2020

Я почти уверен, что где-то есть ошибка; он не будет сжимать скрипт, если он содержит функции стрелок (я думаю, что это решающий фактор - он уменьшился, как только я их вынул). Я попытался поиграть с опциями parse, которые вы можете передать на terser , но это не помогло.

Оказывается, что minifyJS также принимает функцию обратного вызова и работает код явно через Terser таким образом работает просто отлично: 

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,
    },
}),
...