How to use minified third party Javascript files using JSPM

Question

My application is using JSPM and SystemJS for module loading and is using angular.

My config.js file has angular map like:

"angular": "github:angular/[email protected]"

So when I do import angular from 'angular', I am getting the angular.js file from the Path specified in config.js file. That's good.

Now the requirement is I want to use minified third party javascript files (angular.min.js) in the app. But there is no minified files in jspm registry
So the initial loading time of my application is high because of so many large files e.g. angular.js, browser.js etc. that takes too much time to load.

I know, I can do a jspm bundle to minify all dependency files recursively which includes vendors' files also. But my questions are:

1 - Is it possible to use vendor's minified file (angular.min.js) directly with JSPM? It is good to use vendor's minified file rather than minifying them ourshelves, Isn't it?

2 - If above one is not possible, then how can I bundle only my application specific files and still able to use (bundle separately) minified angular.js file?

What is the recommended approach here?

Monsour

Can you add minified files to your registry? – Agamemnon

First download this all js and check performance with gtmetrix.com . then download minfied js and replace with old js. – Maelstrom

Answer 1

In your config.js file you can map any file with a name and have it imported by SystemJs in the browser

So you could potentially do something like

"angular": "jspm_packages/...../angular.min" (The path to your file)

However the recommended approach would be to bundle and minify all your vendor files and as you mentioned, bundle your application specific files separately

You can do this with something like Gulp or Grunt to generate the 2 files

There are lots of examples online of how to do this but here is one to get you started https://blog.dmbcllc.com/using-gulp-to-bundle-minify-and-cache-bust/

Once you have generated both files you add them to your html page via a script tag

<script src="Your File Path"></script>

Option 2 is the preferred approach and I would recommend spending the time to get setup as you only have to do it one time to get your head around it

Gastrin