I was searching over the internet to find a good document about how to install Closure Compiler from google on my Debian Nginx server, and got nothing. all I got so far is Closure Compiler. I want to install this tool to compress and minify both css and js files independently so that these static files get lighter on page load when requested.
Is there any good source how to do that?
all I find is about Yui compressor which is not as good as Closure Compiler as I read.
any thoughts on that?
Closure Compiler does not minify CSS files, just JS files. For that you want: https://github.com/google/closure-stylesheets
Closure Compiler isn't a good choice if you want to minify arbitrary JS files without testing the result. It doesn't back off when faced with eval or with or IE's conditional code like some other compression tools do.
If you are using Apache perhaps you might like Google's PageSpeed module which is designed to work in the general case.
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 am finished up with my google chrome extension development. Now its time to deploy on google chrome extension dashboard. But the problem is How do I minify my javascript files (background.js and content.js). I can use online tools available but they do one file at a time and do not consider the dependency on other javascript file.
For example, message passing between background.js and content.js is done by a key value, which tells the other party that what kind of message is this.
I am not sure whether chrome itself minifies my javascript file. I little illiterate here. Please help.
Chrome doesn't perform any minification out of the box. Your Chrome extension will load the JavaScript/CSS files as is - minification is completely up to you. Most extensions are left unminified for ease of debugging and for other users to be able to inspect the code. There should be negligible performance gains typically for extensions.
If you do want to minify you can run uglify tasks using grunt or gulp.
To minify HTML, try HTMLMinifier
To minify CSS, try CSSNano and csso.
To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
Ref: Minify Resources (HTML, CSS, and JavaScript)
I'd like to start bundling our javascript files. I've found that it's really easy locally using the web essentials plugin, however I need to set up the build server to generate the bundled .js file.
I'd rather not check this generated file into TFS as it will cause conflicts for our developers, and also since it's generated from the source I feel that the server build should generate it.
Is there a command line utility for doing the script bundling outside of visual studio that could be used as part of a build script? My google-fu is failing to find one.
Many thanks,
As long as you wrote it as proper AMD modules, require.js comes with a tool to turn all your files into an optimized bundle.
I have many JS snippets and files shared across multiple projects. I have to either copy-past them into a single file for each project, or serve them as individual files on cdn. Both are bad ideas.
Is there any dependency management and build tool like Maven for JavaScript? Ideally it would take a set of js dependencies and build a single js file which can be served on cdn.
I can write a script to do that. But I'm looking to find if anything comparable to Maven exists for JS.
Update 2014: Based on answers here and my research following are most popular tools:
Bower, NPM, RequireJS, Browserify, Webpack, Grunt, Gulp
There's RequireJS, but that's kind of a different thing than Maven, and what you're asking it to do is different than Maven too. There are any number of JS combiner/minifiers, like jekyll-combiner and a zillion others.
If you're using Maven, the JavaScript Maven Tools might be of interest. If you're not, I don't know of a unified way to specifiy, download, combine, etc. for arbitrary build systems. Some of the node.js stuff might be useful, but I've never used that outside of a node.js context, so I'm not sure.
http://webjars.org/ packages JS libraries as JAR files and makes them available under Maven.
RequireJS is not a replacement to WebJars; it complements it.RequireJS will use public JS files (on CDNs) at runtime, whereas Webjars will download the necessary files at build-time and have you host them yourself.
Because most JS files are not hosted on CDNs, I use Webjars to download the necessary JS files at build-time, and reference them using RequireJS. That way I get the best of both worlds.
Take a look to grunt. It's very flexible build tool for javascript projects. Used by jquery team and other big projects. It combine, minify, test, lint js files, wtitten in javascript, have dozens plugins for whatever you want
What's a good way to bundle a Common.JS project, and then minimize and obfuscate the bundled script? (The library is intended to be used in a browser.)
I'm experienced with the Google Closure Compiler, however I think I might like Common.JS better.
There will also be some Coffeescript files in the project, but I figure I can take care of them with a separate step by compiling them to Javascript.
I wrote a small script to bundle/minify CommonJS modules a while back, it should do what you want (and it takes care of your coffeescript without an additional step)