RequireJS allows one to load libraries from a CDN. In case the CDN is down, one can also have a backup option where the file can be located some where else (in this case, we assume it is located locally). This is all done in the paths object. For example, in order to load JQuery from a CDN and then locally if the CDN is down, do this:
paths : {
jquery : [
'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
'lib/jquery',
]}
The above example would first try find query from the CDN, then from lib/jquery.
Question
I am under the impression that when using the requirejs optimiser, things get minified and obfuscated into one large file. How would the a backup option work in the optimiser? Would it be included in the minified file? If so, then there is absolutely no advantage to using a CDN. But if the backup option is not included in the optimised version, then how will optimised code cope if the CDN goes down?
Thanks in advance for the answers.
You can have different configuration settings for your regular site vs. what you use to feed the optimizer, so in this case you would use an "empty" config in your optimizer version so that it doesn't include jQuery in the combined/minified version:
paths: {
jquery: "empty:"
}
See the documentation for further details:
http://requirejs.org/docs/optimization.html#empty
Related
I'm building an app that will contain many js (jquery) modules (files) using the following setup;
The build is run using Grunt task runner.
I use handlebars templates, then generate the html from *.hbs files.
During the build, I uglify all the js files into one minified file.
I call the minified file in my application <script src="assets/js/app.min.js"></script>
Now, I want to use requirejs to organize my code and adhere to the AMD specifications..
But I got 3 problems with this approach:
I need to have 1 single minified file for all the js; this keeps my code harder to "decode" thus to copy (since it is mixed with other dependencies; jquery, modernizer..) and also helps avoid extra http requests if scripts are called individually.. However, requirejs needs a main file to initialize the app and inside that main file It calls the other required files.. I don't have such configuration.
Many of the dependencies I'm using are in a bower package (that I don't include in the distribution); this makes it not possible to call those files using the suggested requirejs method.
I'm using jquery on this with some 3rd party plugins that don't call define(); to make them work I have to use shim config which again rises the problem #2!
So how am I supposed to take advantage of requirejs while keeping my code in modules and well organized?
Sorry for the long question and thanks for reading :)
ps: Feel free to change the title of the question as I couldn't find a better one!
I finally opted for AngularJS as it adheres to my setup above and allows me to split my app into manageable small modules.
I have also the possibility to use the ease of jQuery (even though it is not a best practice among angular community) and much more.
I am deploying an expression engine install and am trying to optimize the delivery of static assets as much as possible. What would likely be the better solution?
-Using Minimee to minify and concatinate css/js/html and deliver from the main server
OR
-Using a CDN like amazon cloudfront and doing the minification/gzip on that end and only serving static assets in this way?
OR
-some combination of both?
Thanks!
I'd definitely consider using Amazon Cloudfront as a CND first and then do additional minification as needed. I think that serving assets via a CND will give you bigger boost in performance than just minification.
Additionally, Assets plugin for Expression Engine has a built-in Amazon S3 support so it could make syncing your assets with seamless. Alternatively, you could rsync periodically, that works well too; I have used s3cmd tool in the last it works well (don't get turned off by the look of their website, s3cmd is very easy to use.
I was recommended that I move this question from StackOverflow to here.
I am running a web site on a server with Tomcat and IIS. I use .JSP and Java in the back end.
I don't know how to configure IIS to automatically minify resource files (CSS, JavaScript, images) when using .JSP. I have found a few suggested solutions online, but they all apply to IIS and .ASP.
I added the "compression" tag to this post because there is no "minification" tag available, but I am not referring to gzip compression, but removing white spaces, merging resources for faster download etc.
Could anyone help me figure out how to configure IIS to minify resource files with .JSP? Thank you!
Minification a process which combines multiple CSS or JS files to a single file and perform process of compression(whitespace removal) and obfuscation(JS) is an ideal build time solution, rather than a run time solution. While using Tomcat with IIS, it will be good to have some thing like this:
Use WRO4J as a maven build time plugin. Create an attribute like
devmode=true or false. In JSP's have if else condition to define
groups to add multiple CSS/JS or Single based on the devmode value.
While deploying use devmode = false. This with maven configuration will compile JSP with single CSS/JS files.
In IIS, configure a separate VD and map your static resources of war to it. Write a rewrite rule to instruct IIS to serve the static resources. Enable static compression.
The above said configuration will take less load on the CPU.
Some links of interest could be:
https://code.google.com/p/wro4j/wiki/MavenPlugin
Unobtrusive way to combine and compress javascript/css for java/spring/maven applications?
I am trying to find an example of a CDN server written in nodejs that does the following:
Minification of CSS & JS
Pre-Compiling LESS
Pre-Compiling CoffeeScript
Static Redirection if content already available in another bucket
A management interface
I realize that something like this already exists (S3 etc) but my interest is academic. I am interested if something like this has been done in node, and how.
You should have a look at express-cdn, a module to deliver compressed, minified and assets combined assets to CDN servers (Currently Amazon S3). It lacks some management interface but implements a couple of features you require.
Look into grunt, it has plugins for every kind of asset pipeline.
I cant find a module to perform all your tasks at the same time. You should mix modules in your application. I recommend you look at npmjs.org
Minification of CSS & JS ---> Here
Pre-Compiling LESS ---> Here
Pre-compiling CoffeScript (The command-line version of coffee is available as a Node.js utility.) Here
Static Redirection if content already available in another bucket: Nothing clear, you should have some kind of db for the files, for the redirections go to nginx.org <3
A management interface: Any Easy to extend Web-based File Manager for node.js?
I see a barebone.jsp file created (I guess by the MinifierFilter) as well as for deploying compressed and cached js. I want to separate development and production cases, and as for development, I just don't want Liferay not only to cache produced javascript file, I don't want to have this generated instance at all.
To be more precise, I want all javascript files to be concatenated on the fly. I always want to have an opportunity to edit any statics files at development and to see results as soon as possible.
What is the easiest way to implement it?
include the settings from portal-developer.properties in your portal-ext.properties. This disables minifiers, caching etc. and you can develop without the problems mentioned. You don't want this setting in production though, as all files will be loaded individually.
(Edit: It might be advisable to include my comment from below in the answer):
You find this file in webapps/ROOT/WEB-INF/classes
All the *.fast.load parameters are for the various minifiers (css, js), but typically you want all of the parameters named in there.