0

Currently, I face some serious problem about duplicate referencing 3rd-parties library that causes some libraries to malfunction.

This is the first custom element.

<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/jquery-ui/jquery-ui.js"></script>
<dom-module id="jquery-ui-menu">
    <script>
        Polymer({
            is: "jquery-ui-menu"
        });
    </script>
</dom-module>

This is the another element.

<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/jquery-ui/jquery-ui.js"></script>
<dom-module id="jquery-ui-popup">
    <script>
        Polymer({
            is: "jquery-ui-popup"
        });
    </script>
</dom-module>

As you can see, both of this script tag refer to jQuery that locate in the same path. Normally, browser should load jQuery 2 times that cause some serious problem like the following code.

All registered event will be wiped out when jQuery is loaded second time.

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
    $(window).on('test', function (){alert('test!');});
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
    $(window).trigger('test');
</script>

http://jsfiddle.net/sry1shpt/

I think this is not the bug of jQuery or any other 3rd-parties libraries. But it's a serious problem of Polymer. It's totally nonsense to allow element load duplicated script.

Do you have any practical way to solve this problem?

Please remember the source code of both elements may locate in difference repository and it should not know about each other.

Thanks,

1 Answer 1

0

You can put your <script> tags into a seperate HTML file (i.e. jquery-scripts.html) and use HTML imports in both custom elements:

<link rel="import" href="jquery-scripts.html">

HTML imports are de-duplicated and thus jquery-scripts.html and as a consequence the jquery library will only be imported once.

2
  • Thanks. I know about this way. But is it a standard way to implement it? I read about some guy in Polymer team wrote about using bower to solve about version of 3rd-parties libraries and relatively reference to libraries in bower folder.
    – user94893
    Aug 7, 2015 at 17:04
  • Well AFAIK it's the only way to avoid that jquery is loaded twice. With bower you can manage your dependencies and it will put all of those into the bower_components folder and you can reference it using a relative path (this is important as the de-duplication feature works only for the same origin). However this doesn't solve your problem as a script tags are not de-duplicated by the browser (same library is downloaded twice). HTML Imports supports de-duplication and thus allows you to avoid downloading jquery twice.
    – Ümit
    Aug 8, 2015 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.