Minifies HTML issue with

ignacio...@gmail.com

unread,

Oct 23, 2014, 1:46:43 PM10/23/14

to polym...@googlegroups.com

Hi,

If my code use some polymer elements that have attribute like "select='something'" and I try to minify my file, the generate html file is broken. How ?

If I have

{code}

<core-selector selected="tab1" horizontal justified layout center>

....

</core-selector>

{code}

the minify version is

{code}

<core-selector selected horizontal justified layout center>....</core-selector>

{code}

is there a way to specify not to resolver the select attribute ?

If I modify the polymer element and change selected to selectedElement or another name it work without problem.

Today minify my html and polymer elements are crucial because my page use several polymer elements (almost 8) and without minification the page is huge and heavy.

Also...can Polymer provides a minimised version of the components (css, js, html) ?

Best regards,

Ignacio

Eric Bidelman

unread,

Oct 23, 2014, 1:56:45 PM10/23/14

to Ignacio Manzano, polymer-dev

Can you be more specific on the minifier you're using? It shouldn't trip out attribute values from the markup.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b9cd9dd4-8a94-4e7c-b80a-75937e97304a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

ignacio...@gmail.com

unread,

Oct 23, 2014, 2:13:34 PM10/23/14

to polym...@googlegroups.com, ignacio...@gmail.com

Hi,

Yes, sorry.

Im using grunt as following

   htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          conservativeCollapse: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true,
          removeComments:true,
          minifyJS:true,
          minifyCSS:true
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/{,*/}*.html'],
          dest: '<%= yeoman.dist %>'
        },{
            expand: true,
            cwd: '<%= yeoman.dist %>',
            src: [
                'bower_components/{,*/}core-overlay.html',
                'bower_components/{,*/}core-selector.html',
                'bower_components/{,*/}core-a11y-keys.html',
                'bower_components/{,*/}paper-ripple.html',
                'bower_components/{,*/}core-style.html',
                'bower_components/{,*/}core-iconset.html',
                'bower_components/{,*/}core-icons.html',
                'bower_components/{,*/}core-transition-css.html',
                'bower_components/{,*/}paper-shadow.html',
                'bower_components/{,*/}core-icon.html',
                'bower_components/{,*/}core-dropdown.html',
                /*'bower_components/{,*//*}paper-dialog.html',*/
                'bower_components/{,*/}core-selection.html',
                'bower_components/{,*/}core-iconset-svg.html',
                'bower_components/{,*/}core-collapse.html',
                'bower_components/{,*/}core-transition.html',
                'bower_components/{,*/}paper-icon-button.html',
                'bower_components/{,*/}paper-button.html',
                'bower_components/{,*/}core-meta.html',
                'bower_components/{,*/}paper-menu-button.html',
                'bower_components/{,*/}core-dropdown-overlay.html',
                'bower_components/{,*/}paper-focusable.html',
                /*'bower_components/{,*//*}paper-radio-button.html',*/
                'bower_components/{,*/}core-submenu.html',
                /*'bower_components/{,*//*}paper-checkbox.html',*/
                /*'bower_components/{,*//*}paper-item.html',*/
                'bower_components/{,*/}core-menu.html',
                'bower_components/{,*/}layout.html',
                'bower_components/{,*/}paper-menu-button-transition.html',
                'bower_components/{,*/}paper-button-base.html',
                'bower_components/{,*/}core-overlay-layer.html',
                'bower_components/{,*/}paper-radio-group.html',
                /*'bower_components/{,*//*}core-item.html',*/
                'bower_components/{,*/}core-icons.html',
                'bower_components/{,*/}polymer.html',
                'bower_components/{,*/}paper-dialog-transition.html',
                'bower_components/{,*/}core-key-helper.html',
                'bower_components/{,*/}web-animations.html',
                /*'bower_components/{,*//*}core-header-panel.html',*/
//                'bower_components/{,*/}core-drawer-panel.html',
                'bower_components/{,*/}core-toolbar.html',
                'bower_components/{,*/}core-media-query.html',
                /*'bower_components/{,*//*}paper-dropdown-menu.html',*/
                'bower_components/{,*/}core-range.html',
                'bower_components/{,*/}paper-progress.html'
                /*'bower_components/{,*//*}core-input.html',*/
                /*'bower_components/{,*//*}paper-input.html'*/],
            dest: '<%= yeoman.dist %>'
        }]
      }
    }

Just when I copied the text I realize that the issue is with " collapseBooleanAttributes: true,"

Sorry for the inconveniences.

Best Regards,

Ignacio

Daniel Freedman

unread,

Oct 23, 2014, 2:27:56 PM10/23/14

to ignacio...@gmail.com, polymer-dev

collapseBooleanAttributes should be false since "selected" is considered a boolean attribute: http://perfectionkills.com/experimenting-with-html-minifier/#collapse_boolean_attributes

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/63f85554-971f-4979-9d8d-31877c257ed2%40googlegroups.com.

Rob Dodson

unread,

Oct 27, 2014, 9:24:47 PM10/27/14

to Daniel Freedman, Ignacio Manzano, polymer-dev

my advice, don't use htmlmin. Use minifyhtml, see the grunt file for the current generator-polymer (https://github.com/yeoman/generator-polymer/blob/master/app/templates/Gruntfile.js)

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUAVAiDvrmm2G77pXO8VWZ1Zhzw8BGag3yH-cEse7%2BnhWS%2B%2BQ%40mail.gmail.com.

Rob Dodson

unread,

Oct 27, 2014, 9:25:48 PM10/27/14

to Daniel Freedman, Ignacio Manzano, polymer-dev

I should clarify this a bit more. The generator previously used htmlmin but it was way too brittle and kept breaking on me. There were some elements that would just destroy it. htmlmin is just a bunch of regex whereas minifyhtml has an actual html parser that it uses.

Ignacio Manzano

unread,

Oct 28, 2014, 9:07:58 AM10/28/14

to Rob Dodson, Daniel Freedman, polymer-dev

I tried it, but is not minimize all the html file. For example the inline <style> and <javascript> are not minimized and I got this

Suggestions for this page

Minify HTML for the following resources to reduce their size by 9.8KiB (44% reduction).

Minifying http://localhost:8088/.../core-overlay.html could save 2.2KiB (45% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../core-selector.html could save 1.6KiB (50% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../paper-ripple.html could save 1.1KiB (33% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../core-iconset.html could save 1.0KiB (56% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../core-a11y-keys.html could save 918B (41% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../core-style.html could save 809B (35% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../core-icon.html could save 602B (47% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../paper-dialog.html could save 529B (50% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../paper-shadow.html could save 527B (38% reduction) after compression. See optimized content
Minifying http://localhost:8088/.../paper-focusable.html could save 523B (53% reduction) after compression. See optimized content

It means,I can reduce my site in 9Kb aprox only minimizing the inline js and css

Thanks

Ignacio

Rob Dodson

unread,

Oct 30, 2014, 5:09:50 PM10/30/14

to Ignacio Manzano, Daniel Freedman, polymer-dev

In the yeoman generator we run vulcanize first, that runs uglify on the js and concatenates the CSS, then we run the html minifier against what's left over. So only using the minifier to compress the HTML and leaving JS and CSS to vulcanize. The only problem I've noticed is the --strip flag does not seem to work on the version of grunt-vulcanize that we're using so comments remain in the page, otherwise everything is as compressed as I've been able to get it.

Try the yeoman generator and see if it meets your needs

Ignacio Manzano

unread,

Oct 31, 2014, 5:38:26 AM10/31/14

to Rob Dodson, Daniel Freedman, polymer-dev

Hi,

I understand. Im able to minimize my elements. My problem is with the core and paper elements. The vulcanize does not take a look to the dependent components. So, If I want to vulcanize or minimize the core-*/paper-* elements I have to declare explicit in the GruntFile one by one, including the dependent one. It is a very hard work and not work with all the components.

My problem uses several core-*/paper-* components (Almost 15 ) and it download a lot of dependent components. For example mydashboard page downloads 2mb in components and I want to reduce this number, not only for the size but also for the amount of time (it take almost 4seg).

It would be great if bower contains a minimized version of the components(the html,css and js)

Best

Ignacio

ignacio...@gmail.com

unread,

Nov 12, 2014, 5:16:59 AM11/12/14

to polym...@googlegroups.com, robd...@google.com, dfr...@google.com, ignacio...@gmail.com

Hi

I attack the issue fro another side.

Now Im just trying to vulcanize the polymer components, not only my components, the built in.

So, In my elements.html file I have


<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="../bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/tile-cascade.html">


<!-- here my components -->

When I run the vulcanize I got the right file, but when I tested in the browser I got these errors


Uncaught TypeError: object is not a function elements.vulcanized.html:542
Uncaught TypeError: object is not a function elements.vulcanized.html:626
Uncaught TypeError: object is not a function elements.vulcanized.html:812
Uncaught TypeError: object is not a function elements.vulcanized.html:1220
Uncaught TypeError: object is not a function elements.vulcanized.html:1479
Uncaught TypeError: object is not a function elements.vulcanized.html:1691
Uncaught TypeError: object is not a function elements.vulcanized.html:1806
Uncaught TypeError: object is not a function elements.vulcanized.html:1942
Uncaught TypeError: object is not a function paper-ripple.html:274
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function elements.vulcanized.html:2088
Uncaught TypeError: object is not a function paper-focusable.html:36
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-shadow.html:65
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function elements.vulcanized.html:2166
Uncaught TypeError: object is not a function paper-button-base.html:26
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function elements.vulcanized.html:2337
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-media-query.html:46
Uncaught TypeError: object is not a function core-selection.html:77
Uncaught TypeError: object is not a function core-selector.html:78
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-drawer-panel.html:82
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-header-panel.html:95
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-meta.html:68
Uncaught TypeError: object is not a function core-iconset.html:67
Uncaught TypeError: object is not a function core-icon.html:70
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-item.html:44
Uncaught TypeError: object is not a function core-collapse.html:42
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-submenu.html:82
Uncaught TypeError: object is not a function core-iconset-svg.html:56
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-input.html:109
Uncaught TypeError: object is not a function core-style.html:149
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-input.html:156
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function elements.vulcanized.html:2446
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function elements.vulcanized.html:2495
Uncaught TypeError: object is not a function core-a11y-keys.html:290
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-radio-button.html:77
Uncaught TypeError: object is not a function paper-radio-group.html:59
Uncaught TypeError: object is not a function core-transition.html:75
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-transition-css.html:113
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-dialog-transition.html:19
Uncaught TypeError: object is not a function core-key-helper.html:14
Uncaught TypeError: object is not a function core-overlay-layer.html:30
Uncaught TypeError: object is not a function core-overlay.html:118
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-dialog.html:90
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-checkbox.html:75
Uncaught TypeError: object is not a function core-dropdown-overlay.html:26
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-dropdown.html:87
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-menu-button-transition.html:23
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-menu-button.html:104
Uncaught TypeError: object is not a function paper-item.html:53
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-toggle-button.html:80
Uncaught TypeError: object is not a function core-range.html:31
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-progress.html:71
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function paper-dropdown-menu.html:92
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-scroll-header-panel.html:81
Uncaught TypeError: object is not a function core-transition-pages.html:62
Uncaught TypeError: object is not a function hero-transition.html:106
Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.concat.js:9569
Uncaught TypeError: object is not a function core-animated-pages.html:248

I try with just only one polymer component alone in the elements.html and I got the same error but just for that component.

What I m doing wrong ?

Why I want to vulcanize the polymer compoments? because I use several components and when I run benchamrk test the browser is downloading 103 components! just for polymer and the loading time is terrible at that point.

Best

Ignacio

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/63f85554-971f-4979-9d8d-31877c257ed2%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.

Rob Dodson

unread,

Dec 7, 2014, 6:36:21 PM12/7/14

to Ignacio Manzano, polymer-dev, Daniel Freedman

Take a look at this: https://github.com/robdodson/contacts-app

I used the yeoman generator to manage all of the components in my app and vulcanize them down to a single bundle. I think the issue is if you have any imports outside of `elements.html` and you run vulcanize, it's going to try to load a bunch of js twice and that may be causing this issue.

Reply all

Reply to author

Forward