Bundle Error

[zeeshanjan82]

When I bundle the application using command: jspm bundle-sfx --minify app/app and then try to use the javascript build.js file I get an error e.import is not a function. I have attached the screenshot.

[marjan-georgiev]

This seed app uses the systemjs-route-bundler which bundles the app into several optimized bundles instead of a single big bundle.

You can run the bundler with gulp build

[zeeshanjan82]

Thanks @marjan-georgiev I even tried that but when I run the command gulp release I am able to view all the .js files minified in my dist folder but how should I change my index.html file to point to these new minified files. Do I have to make any change to my index.html file after I have run my gulp build or gulp release command.

[marjan-georgiev]

No need to change anything. Running gulp release will create several bundles:

• /dist/app/app.js
• one bundle for each of the main routes in the application
• several bundles containing common modules shared between the other bundles (these will be created into /dist/bundles)

We create multiple bundles rather than a single large one in order to optimize the number of HTTP request vs initial load time for the app. This optimization might not be noticeable for a small app like this, but when you have a huge application with a lot of modules, your app will take ages to load initially if you bundle everything into one single bundle.

If you load the application after gulp release and look in the network tab in dev tools, you will notice that only those bundles that are needed on the current page are loaded. All of them are minified and mangled. The rest of the files in the /dist directory are created during compilation time and are not used after you run gulp release.

[zeeshanjan82]

I remember when I had run the application after using gulp release I was able to view files like es6-moduleloader e.t.c which was a bit surprising as I did not expect to view other files except whats being made ready for the production. But I am sure may be I am not able to understand something. Will check this later today again and will get back if I find that some extra files are being loaded in production.

[zeeshanjan82]

Hi @marjan-georgiev I have tried gulp release and directly running the application using gulp watch serve but I am not really understanding why all the extra files related to es6-moduleloader.js e.t.c are getting loaded , it means all these server requests will be made for all the .js files when we deploy the application in production.

[marjan-georgiev]

@zeeshanjan82 gulp watch is only for development, and it just compiles the app from es6, it doesn't bundle it. Only gulp build and gulp release build the app. gulp release in addition inlines systemjs into app.js and does cache busting.

If you run gulp watch it will delete everything in the /dist folder previously built, and then recompile the application.

Run gulp release and then try loading the app, without running gulp watch.

[zeeshanjan82]

thanks @marjan-georgiev I will be implementing your advice today. However I am facing issue with css for different states for which I have logged another issue #34

[zeeshanjan82]

Hi @marjan-georgiev when I have the 2 links Portfolio and Main on the index.html and when I try to navigate from Main state to Portfolio state , I find an error in my console. I am not sure why I am getting the StateNotFound error. But when I try to navigate by changing the url in the browser I do not see any error.

[zeeshanjan82]

I found the same issue in the seed project as well , I don't think its an error but we have the log in the console.

[marjan-georgiev]

That's not an error. It's a console log by one of the libraries that are used.

[zeeshanjan82]

https://github.com/Swimlane/systemjs-route-bundler/issues/40