CODEWITHSUNDEEP
javascripthtmlpolymerweb-component
Goblinlord
Goblinlord

Reputation: 3390

webcomponents.js when using bower install

Is there a simple way to combine all the files for the webcomponents.js polyfills? I am using polymer and there seems to be 2 major places which add significantly to the number of requests made. webcomponents.js seems to load about 70+ files individually via javascript. Polymer-gestures is the second place making major contributions to the number of requests but much less-so than webcomponents.js. Does anyone have a solution for this rather than going and manually combining all the files?

Why do they not do this already? It seems a bit ridiculous. Even if it were to break it down to 4 files for each of the major polyfill categories it would be much better.

UPDATE: I am unable to get even the example given on the polymer site to work, when using vulcanize to reduce requests. I can get an image to come up fine in the custom component (working). It works after doing vulcanize but doesn't cut down on almost any requests because most are made via script tags written from JS in webcomponents.js and polymer.js. Doing --inline completely breaks it and component doesn't load. Any ideas???

UPDATE: When attempting the example I was using resources I had already pulled for my current project. I tried in an isolated folder and pulled resources again (bower) and it actually worked. What I need to figure out now is breaking everything when I pull it and why? Below are my bower.json files for the non-working case and the working case:

Broken:

{
  "name": "app",
  "private": true,
  "dependencies": {
    "webcomponentsjs": "webcomponentsjs#master",
    "polymer": "Polymer/polymer#master",
    "core-drawer-panel": "Polymer/core-drawer-panel#master",
    "paper-tabs": "Polymer/paper-tabs#master",
    "core-icon-buttons": "Polymer/core-icon-button#master",
    "core-toolbar": "Polymer/core-toolbar#master",
    "core-animated-pages": "Polymer/core-animated-pages#master",
    "core-header-panel": "Polymer/core-header-panel#master"
  }
}

Working:

{
  "name": "test",
  "private": true,
  "dependencies": {
    "polymer": "polymer/polymer#~0.5.5",
    "webcomponentsjs": "~0.5.5"
  }
}

My problem is I still need to have it pull these other resources for my project as they are components I use.

Upvotes: 1

Views: 793

Answers (2)

Goblinlord
Goblinlord

Reputation: 3390

So... I found the issue. I was pulling #master instead of the proper versions I needed. Fixing this pretty much solved any issues I was having.

Upvotes: 0

flyandi
flyandi

Reputation: 1939

You can Vulcanize your code based on the use of components. Detailed explanation is on the Polymer site:

https://www.polymer-project.org/articles/concatenating-web-components.html

Upvotes: 3

Related Questions