I'm just starting out with AngularJS (1.4.7) and hoping to produce a concise build output using Closure Compiler for a new application.
I'm successfully generating a single output file containing all my application's JavaScript preceded by each of the libraries on which it depends.
However, my application uses ngRoute and this is loading a controller and a partial html template for each route when visited. Each template is loaded as required so the first time a route is used there is a delay as the template downloads.
I'm used to working with RequireJS in which a template can be treated as a resource and bundled into the compiled build product, however I don't see a way to do this with Angular and Closure.
I assume this is a problem that has previously been addressed but I've had a very hard time finding relevant information via Google.
Is it possible to include partial templates in a build product, produced either with Closure Compiler or some other tool?
The best way to handle this is a two step process:
Use the r.js optimizer to order your dependencies and create a single JS file.
Use closure-compiler to compress the output file from r.js.
The require js optimizer is available as both a grunt and gulp plugin.
With gulp, you would simply pipe the requirejs output into a compilation task. For grunt, you'll need to set the optimize property to none and generate an intermediate file. The intermediate file will be your js input file for closure-compiler.
Related
I've recently been thrown in to clean up a project which has like 45-50 individual .js javascript files. I wonder what the best approach would be to decrease the loading size of them all. Just concatenate all files into one with npm or gulp? Install some module loader? webpack?
If you're already concatenating, minifying, and uglifying and you don't want all the files to be loaded on all the pages due to a monolithic bundle, you might be looking for something like Webpack's Commons Chunk Plugin.
This plugin walks down the tree of dependencies for each endpoint defined in your Webpack.config file and determines which modules are required across all pages. It then breaks the code into two bundles, a "common" bundle containing the modules that every page requires, which you must load with a script tag on each page:
<script src="commons.js" charset="utf-8"></script>
And an endpoint bundle for each individual page that you reference normally in a script tag placed after the commons script tag:
<script src="specificpage.bundle.js" charset="utf-8"></script>
The result is that an individual page will not have to load modules that will only ever be used on other pages.
Again, this is a Webpack plugin. I don't know if this functionality is available as a Gulp plugin, because it must have knowledge of all endpoints in order to determine which dependencies are common to them all.
I redirect you to the very good https://github.com/thedaviddias/Front-End-Checklist
In particular the following advises:
JavaScript Inline: High You don't have any JavaScript code inline
(mixed with your HTML code).
Concatenation: High JavaScript files
are concatenated.
Minification: High JavaScript files are minified (you can add the .min suffix).
You can accomplish this with a package manager such as gulp, grunt or webpack (for the most famous ones). You just need to choose what you prefer to use.
If you consider webpack, You can start with my very simple (but understanding) starter: https://github.com/dfa1234/snippets-starter
There's no much thing that you can do, basically is:
Concatenation - https://www.npmjs.com/package/gulp-concat
Minification - https://www.npmjs.com/package/gulp-minify
Instead of creating all those scripts, you can get something to re-use on yeoman, f.e. the Fountain, so it will reduce a lot of time just typing procedural code for doing the concatenation/minification.
Also if you can use some lazy load (like RequireJS or some frameworks have support to lazy load the module, like Angular) that will improve the performance of your aplication
EDIT:
If you want even more performance, you can install some compression tool in your server, for example this one for NodeJS https://www.npmjs.com/package/compression
I'm my personal opinion, if you have time, the best approach would be to read and understand the purpose of the project. Then plan a proper refactor. You are not fixing anything with concatenating, this is just a deployment step.
You should analyze which technologies are being used and if you want to maintain this code, in the long run, make a proper refactor into a much more modern stack, maybe you can take a seed project with ES6, webpack, Babel... and create a proper repository well maintained with proper modularity and dependencies resolution.
Once you have that, decreasing the load its just about adding proper tools in build time (babel, webpack, etc).
You would like to add some unit tests and continue working properly :)
I'm working on an old Codeigniter website where the Javascript codebase is messy and poorly structured and I would like to use Webback to manage the scripts. My goal would be start using it to bundle the code I have the way it is, and gradually refactoring it to make use of modules and imports.
At the moment I'm using Gulp on development (but mostly to minify the files) and Carabiner (a Codeigniter library) to insert the scripts in the views.
The scripts, which are all written as IIFEs are not bundled, so in every controller function I have an array of the scripts needed in that page. For example:
public function homepage()
{
$this->carabiner->js([
['libraryThatIOnlyNeedHere.min.js'],
['myscript1.js'],
['myscript2.js'],
['myscript3.js'],
]);
I would like to use Webpack to create a series of bundles so that I end up loading maximum two files on every page: one for the libraries and one for my scripts.
All the practical examples I've seen with Webpack, though, are for Single Page Applications where it's quite easy to bundle everything together.
What would be the best approach in my case? Considering that the code is still not ready to properly use modules and imports, shall I create many entry points in the Webpack configuration file, possibly one for every page and list every script needed in that page?
Main idea behind webpack is to build modules graph from provided sources and then to combine it into bundles. If your code doesn't have explicit dependencies - it may be good idea to start with creating a module from every file using any of available approaches (AMD, CommonJS, etc). You will need to create module identifiers and define dependencies for every module. It may be worth to read this article for example.
As intermediate step you may want to use some loader like Require.JS to load your modularized code.
Until this step will be done - there is not much use of Webpack.
first time i call an url in angular application, the engine gets all templates (external files).I suppose it retrives them for caching. Is there a
method to avoid this, and call only the interested template?
thank you
The best way is to use a build tool such as Grunt or Gulp and automate your build process.
You can install a package that will load all your templates via a set path, convert them into angular template files and concattenate them into one file. Then your angular app will only have to load one file and they are loaded into memory straight away.
Grunt plugin: https://github.com/ericclemmons/grunt-angular-templates
Gulp plugin: https://github.com/miickel/gulp-angular-templatecache
If you don't want to use a build tool you can also embed the templates inline and refer to them via a unique I.D.
Example: Angularjs: Multiples partials in single html?
I'm trying to implement some cache busting on my angular application in a way that it will still allow caching but break it anytime we push new code to production. My setup so far involves using grunt cache-breaker https://www.npmjs.org/package/grunt-cache-breaker to dig through my concatenated angular app.js file and append query params to any string ending in a .html file extension. I also do this for any template files I have that are using an ng-include. One complication this creates is that now I need to first copy my template files to a dist/ directory so I can safely .gitignore the cache-busted versions and not have to commit all of my templates everytime the cache is busted (and create conflicts).
My question is not how to do this but more of a sanity check as to if this is a practical way of avoiding template caching on new code? I have seen examples of disabling template caching in angular but it seems like it is something I would want to use in between code pushes when files are not changing.
How do other navigate this issue?
I think a popular approach is to use something like ng-templates (with a grunt plugin) to generate a JS file that pre-caches all of your templates. Then use the usemin grunt workflow along with an asset versioning task to version the JS file.
I have many JS files. Some of them depend on each other. Many of them depend on jQuery.
I need tool that can accept one file as parameter, fetch all its dependencies transitively and compile them into one file in proper order (based on dependencies)
Dependency information not always available inside files itself, so it would be nice to have it somewhere outside (xml file? folder structure?)
I've heard about Yahoo JS compiler, closure and so on, but I am not sure they do what I need.
Look: I have module "CustomerPage". It sould include "validation.js" and "gui.js". Both require jquery.js. And "gui.js" also requires "myFunctions.js".
I want some ant task or some script that would generate "CustomerPage.js" as result of all that files.
Tool should check dependency order, prevent double including and so on.
My project could have around 500 js files, how could I live with out of this tool?
People says "use GWT", but I need plain JS.
You might want to look at one of the AMD-style module loaders, such as RequireJS. Some of these can do what you want for precompiling, and can run in a development mode which makes it easier to debug by including all the files directly.