Bundle bower components in separate vendor html than in shell defined in polymer.json

Question

I am trying to bundle my Polymer application through polymer cli. My application pulls up data upto 275kb for a simple page.

In my polymer.json file, I have fragmented all my custom polymer elements with src/my-app.html as shell. Problem is that after building my application, my src/my-app.html has size of 273kb in bundled folder. This is a big size, considering the fact that I sidelined Angular and React just to achieve less bundle(vendor bundle) size and more chunked files to get lazyloaded. I was hoping that polymer could give me separate chunks of vendor bundle, but I am not able to achieve that.

I tried to write this in fragments array of polymer.json - "bower_components/polymer/polymer.html". And I wrote "bower_components/**/*" in sourceGlobs array. And I tried to build again. I was hoping that I would get a separate polymer.html file in my build. But I got several errors in terminal and my src/my-app.html is still 273kb.

The error shown in terminal are:

    warn:    Unable to optimize .js file /home/local/JASPERINDIA/vineet.dev/projects/polymer-starter-vin/bower_components/marked-element/demo/index.html_script_0.js 
{ err: 
   { message: 'SyntaxError: Unexpected character \'#\'',
     filename: 0,
     line: 2,
     col: 10,
     pos: 11,
     stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1547:18)\n    at js_error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1555:11)\n    at parse_error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1679:9)\n    at Object.next_token [as input] (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1951:9)\n    at next (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2080:25)\n    at Object.parse (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2066:15)\n    at addFile (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:72:33)\n    at /usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:81:17\n    at Array.forEach (native)\n    at Object.exports.minify (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:79:26)' } }

There are several errors of same kind as above.

I know I can gzip, but that won't be satisfactory solution.

Any help would be appreciated. Thanks

Answer 1

I don't have a specific answer that addresses your concern with the size of your shell file, but I do have a few pointers.

• polymer-build was very recently updated to use a new and improved bundler, which includes creating a separate bundle for shared dependencies (including the ones that are bundled in my-app.html in the Polymer Starter Kit). It may be worth trying the upcoming version of Polymer CLI that has this new bundler.

• You should not specify polymer.html as a fragment. Fragments are intended for lazy-loaded views. For example, in the Polymer Starter Kit, my-view1.html, my-view2.html, my-view3.html, etc. are lazy loaded with importHref. Those files are not explicitly in an HTML import, so they must be listed under fragments in polymer.json.

• You should not list bower_components/**/* under sourceGlobs (or sources). This tells polymer-build to copy your entire bower_components directory, including devDependencies (unnecessary for runtime), to the build output.

• The warning you noted is a benign Uglify error (GitHub issue). The build still completes successfully, but the file affected by the Uglify error will not have minified JavaScript.