Angular App performance with one script file vs many script files - javascript

I am working on large scale web app using AngularJs as front-end and Laravel RESTful API as back-end
Currently I am using gulp to concatenate all script files in one file including angular libraries and all modules and controllers and it's about 46,000 line of code.
Is this a good approach regrading performance?, or I've to include all script files separately.
Also Is concatenating some files and including the others is a good approach?
Thanks in advance!

Yes it is a standard approach for production
For development keep seperate files so debugging is a lot easier.
For production it is highly advisable to combine all the files and minify it.
Infact if you use webpack you can have all css , js files in one bundle

Webpack is awesome tool. Gulp would also do the job.

Related

Can Webstorm automatically include project js files in html, or merge them into one?

I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler

How to use Gulp to fetch external javascript files

I'm fairly new to using Gulp, but i've been starting to play around with it and the fact that I can run a server with livereload just by typing 'gulp' makes me wonder where it's been my whole life.
I tend to use CDN's for external libraries but am now working on a project that doesn't allow calls outside the network, meaning I have to include the js files. Is there a way with gulp that will fetch all external javascript files, place it in one single file and minified?
I'm pretty sure you are looking for an asset like this:
gulp-bundle-assets
https://www.npmjs.org/package/gulp-bundle-assets
You can also look at these Gulp plugins for help with CDNs:
gulp-s3: With this you can uploads your static files to Amazon S3 at build time.
gulp-google-cdn: This will replace all references to 3rd party libraries with Google CDNs

Using Grunt/Gulp with PHP Framework

So I just started learning Laravel, and I want to build something cool with it. I've been working mostly with frontend development, particularly AngularJS, and started using RequireJS recently.
I like the way Yeoman generators set up front-end applications as far as the directory structure, (i.e. /app, /test, /dist) and would like to continue using this structure, but I want to pull it into the overall application. I also like that in most cases, the application uses unbuilt files (particularly JS) for development because it cuts down on waiting for processes.
How can I set up and structure my Laravel (or any other framework) application and templates to use a similar directory/build setup for files? The problem I keep getting stuck on is using unbuilt/uncompressed files for development, as well as a clean separation of my source vs. built front-end files.
Since starting with Laravel I have tried all sorts of Asset Management tools and methods. I ended up using Stolz/Assets, an ultra-simple-to-use assets management PHP library that can be installed with composer. It is not an ideal tool as there are some issues when minifying (particularly CSS.)
Like you though I really needed neatly compiled and minified js/css assets for production.
After much research I have ended up using Gulp.js after reading this blog post (http://www.abishek.me/using-gulpjs-with-your-laravel-application/). I immediately downloaded and installed Gulp.js and created a gulp file with my own directory structure in it. I was up and running within minutes. I have since gone on to modify my gulp file so it now compiles SASS, minifies and compresses both CSS and JS for production.
I continue to use Stolz/Assets (Asset Management Library for Laravel) for serving up my files but I do not rely on this for any compiling or minification.

obfuscating whole phonegap angularjs project (all my javascript files)

I see many obfuscators which always obfuscate only one independed js file.
In my phonegap angularjs project I have many js files (controllers, factories, services) that are in separate files and depends on each other.
Is there a software that will obfuscate all my js files, so that it will not break files that depend on each other?
Thanks
Use grunt and uglify: Nodejs grunt obfuscate
For AngularJS specifically, make sure you read the "Note on minification". You may need to slightly change the way you inject dependencies to avoid them being breaking during obfuscation: https://docs.angularjs.org/tutorial/step_05

Django how to deploy css and javascript

What the best way to organize and deploy java-script and css files in django ? The main idea is rather simple - in debug mode use a lot of JS's and in production only one minified java-script . I am think that I 'am inventing a bicycle, trying to reorganize my old project this way, and should be some well known solution for this problem.
Seems I have found what I need - django-pipeline
See Managing static files in official documentation.
In short:
When debugging you can ask Django to serve these files by himself (just put them in one directory and configure STATICFILES_DIRS).
When going into production stage, you should use a real webserver like Apache. (see Deploying static files)
You could collect all static files in a folder (https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/) and then run requirejs optimiser to minify and merge the js files (http://requirejs.org/docs/optimization.html).

Categories

Resources