Stencil: How to bundle all the javascript file into a single file?

Created on 9 Apr 2018  路  6Comments  路  Source: ionic-team/stencil

Stencil version:

 @stencil/core@<version>

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

Stencil generates several javascript file and use lazy-load.

Expected behavior:

It is better if we can use stencil to build a single page app which only import a single javascript file.
If so, we could use the relative path to load the app without assign the baseUrl.

Related code:

<script src="./build/app.js"></script>

Other information:

All 6 comments

Creating a single file output is a feature we may add in the future, however, a single file will loose out on many of the benefits, such as using native es modules and es2017, and not having to require polyfills for most browsers. I think this is a feature that we can do, but in the early stages yet I think we're going to keep the API footprint small. Thanks

We could really use this feature to fix our time-to-render.

Hey @coopaq , I'd recommend checking this snippet out https://github.com/ionic-team/ionic-pwa-toolkit#h2-push for some info on that. Multiple smaller bundles can actually be much faster than one single huge file, especially if you use H2 push.

@jgw96 Thank you so much for the suggestion. I'm pretty excited about HTTP/2 also. Our corporate web server still lacks HTTP/2 support and we have customers who require IE11 < Windows 10.

Are there any plans to provide a bundle option for the build?

I really wish this was an option. I'm hitting a nasty bug in a production component, where stencil is trying to load one of the build files from the wrong domain. If I was able to bundle everything and avoid lazy loading this wouldn't be a problem. So +1 for this feature request.

Background on the bug I'm hitting:

  • One of the build files is being loaded from the wrong domain (apparently stencil is finding the wrong script tag and grabbing the wrong domain from there)
  • This only seems to happen on iOS safari
  • It even only happens on the first page load, after refreshing the page stencil loads everything from the correct domain, every time
  • I can consistently reproduce this and have debugged it with Browserstack
  • I haven't (yet) created a new issue about this since it's so isolated, and maybe it's fixed in a more recent version of stencil (or maybe safari just sucks :D)
  • I can provide more details and a repro if needed

EDIT: This single file bundle issue seems to be a duplicate of #683

Was this page helpful?
0 / 5 - 0 ratings