Polymer issue importing scripts outside of primary Vulcanized bundle
Question
When developing polymer webcomponents, I eventually run them through vulcanize to be served on production. unfortunately this causes a issue for me when I would like to use two separate bundles.
I have for example a base.html file that contains all the main imports that will be used across the site, on every page. I vulcanize this as base.build.html .
Then for different pages, I might have a custom import just for that page eg. contact-page.html
Both of these are loaded in <head>
Example Snippet:
<head>
<!-- snip -->
<!-- This is the vulcanized file -->
<link rel="import" href="/static/elements/site-base.build.html">
<!-- This extra import causes the extra errors -->
<link rel="import" href="/static/elements/timeline-base.html">
<!--
File above is not currently vulcanized, but the import still breaks
even if it is
merging that import into site-base solves the problem.
Also, if the site-base import _is not_ vulcanized, then both imports
work fine
-->
<!-- snip -->
</head>
The Idea here being that base.build.html is cached and available on all subsequent pages. Other bundles are only loaded and cached as required.
The problem is that, if I only load my base bundle, all webcomponents works fine; But if I then do any extra imports then most of the webcomponents on the page breaks, with tonnes of error messages in the console.
The current workaround is to just include all the extra imports in my base bundle, but this of course ends up with having a larger bunlde file loading scripts and css which I don't need on every page.
Is this a trick with Vulcanize? Or maybe it's got something to do with the import order for the scripts?
NOTE : The sites in question are not single page apps. These are traditional server side rendered website templates, so the build process is very different to much of the polymercli tooling.
1 answers
solution1
1 ACCPTED 2017-02-16 20:56:27
Without seeing the error messages you get, I assume the issue you have is, that your extra imports include elements (and most likely polymer.html) that are already bundled in your vulcanized base package. And Polymer throws an error when it tries to initialize the same element twice.
What this means is that you usually can't mix vulcanized with non-vulcanized packages.
Getting multiple vulcanized packages to work together can be very tricky as well, and you will have to play with the -exclude and/or -strip-exclude option of vulcanize to make sure no elements (and their dependencies) that are included in the first bundle will be included in the second bundle.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.