Add an HTML Minifier

[dfreedm]

HTML minification was an old feature of vulcanize (https://github.com/Polymer/vulcanize/issues/185).

html-minifier seemed to hang in my evaluation. An AST based minifier with dom5 would probably be the safest route.

[arthurevans]

Would this help? This article mentions a configuration for html-minifier:

https://jongeho.wordpress.com/2015/06/24/endeavors-with-polymer-1-0-vulcanize-crisper-html-minifier/

[gazal-k]

@arthurevans I tried the config given in the link you shared. Its also used in https://github.com/StartPolymer/polymer-starter-kit-plus.

Here's the vulcanize task config I tried:

// Vulcanize imports
gulp.task('vulcanize', function () {
  var DEST_DIR = 'dist/elements';

  return gulp.src('dist/elements/elements.vulcanized.html')
    .pipe($.vulcanize({
      stripComments: true,
      inlineCss: true,
      inlineScripts: true
    }))
    .pipe($.crisper())
    // Minify elements.vulcanized.html
    // https://github.com/PolymerLabs/polybuild/issues/3
    .pipe($.if('*.html', $.htmlmin({
      customAttrAssign: [
        {source:'\\$='}
      ],
      customAttrSurround: [
        [ {source: '\\({\\{'}, {source: '\\}\\}'} ],
        [ {source: '\\[\\['}, {source: '\\]\\]'}  ]
      ],
      removeComments: true
    })))
    .pipe($.if('*.js', $.uglify()))
    .pipe(gulp.dest(DEST_DIR))
    .pipe($.size({title: 'vulcanize'}));
});

It hangs for me too.

[arturparkhisenko]

after

.pipe($.vulcanize({
      stripComments: true,
      inlineCss: true,
      inlineScripts: true
    }))
.pipe($.crisper())

i use

.pipe($.minifyHtml({
      empty: true,
      spare: true,
      quotes: true,
      loose: true //fix some html
    }))
.pipe($.minifyInline())

and got a file smaller than polybuild

[arthurevans]

I believe that polybuild now includes optional minification with the --maximum-crush flag. Can this ticket be closed, @azakus, or are there still outstanding issues?

[dfreedm]

There's still no html minification in polybuild, nor in polyclean.
I admit to not really looking at this issue recently, as I've seen wildly different outcomes for HTML minimizing tools depending on the input HTML.
I haven't seen a single tool that works reliably for all use cases, and that makes me wary of adding one here.

[arthurevans]

Oh, duh. Was confusing HTML minification with the JS minification option. Never mind.

[indolering]

Starting out with comment and whitespace removal would be a nice start.

[indolering]

So I did some analysis and whitespace removal would be a lame start.

In my case, HTML/CSS make up about 10% of the final output, so the maximum HTML/CSS minification could save is 10%. Then I dug into the 30KB of HTML/CSS code and found that the biggest waste of space were comments and unused styles and SVG icons imported by paper-button and elements depending on paper-styles.

I compared the size of the raw and minified CSS from Bootstrap and Foundation after compression with gzip and minification only shaved off an additional 1.5K and 4K respectively (18.5K->17K and 22K->18K).

I'm sure there are other optimizations to be made, such as using CSS shorthand, but we definitely need holistic analysis of the HTML, CSS, and JS.

[TimvdLippe]

I just tried out the following setup which seemed to work for me just fine:

gulp.task('build', function() {
  return gulp.src('app/index.html')
  .pipe(polybuild({
    maximumCrush: true,
    suffix: ''
  }))
  .pipe(load.if('*.html', load.minifyHtml({
    quotes: true,
    empty: true,
    spare: true
  })))
  .pipe(gulp.dest('dist/.'));
});

Maybe just a mention in the README about the HTML minification could instruct how developers can enable HTML minifying if they desire so.