Search code examples
angularjsnpmgruntjsbundleminify

Bundle a angular 1.5.x application that was not built with npm

So I have this Angular app that I built, without thinking that it would grow so big and so fast.

But now I have ~1.9MB being downloaded in 26 css files and 55 javascript files!!!

Of course the loading time is terrible, taking over 20 seconds to load!!!

enter image description here

Searching around, I found that I can bundle all the files into one .html file, one .css file, and one .js file. Using one of the many options available, webpack, rollup, gulp, grunt, and maybe a few others I missed.

The problem is, that I didn't use npm in the first place to install all the dependencies, rather downloaded the min.js file of each library, and included them all in the index.html file.

  • Do I have any other choice other than essentially rebuilding my app with npm?

  • Is there a simple guide that I can follow that will concat and minify all the files so that I can see if it is really worth the hassle?

  • And what is the simplest option of all the different bundling options available?

Solution

  • Yes, you have another choice!

    Gulp is your friend, is super easy to setup, and he will help you to bundle and compress all your js code to single or two files (i am splitting my bundled codecode to 2 files, one is all the lib files, including angular itself, and one file to my own code).

    You can start with this simple article: https://markgoodyear.com/2014/01/getting-started-with-gulp/