使用一些生成的密钥将js / css文件最小化为资产的方法

Question

I am have been building web applications for several years, exploring and looking for ways to improve the web app performance. I would like to ask if there is any method to minify css/js when we launch the web application automatically? I do not use any php frameworks, rather i built my own.

I was exploring one web application and i saw they have this

<link href="/assets/application-76c372b1409e29d226c9566022d5546f.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cb571d9ff5185e712000e3378494e4ee.js" type="text/javascript"></script>

I seen similar sites that has js and css files stored in /assets/ etc with a name starting with application- too. I would like to know if anyone of you know what mechanism they are using? I am sure they compressed their files the same way.

Any idea what framework/programming langugage they are using?

advice appreciated. thanks

Answer 1

Often this functionality is built into the web framework that you are using, or an external series of programs like SASS, Compass, Uglify, and Grunt do the work. There are MANY ways to do this, but I'm going to explain the principle and just one way of doing it.

Generally, the principle is that during your deployment process, you concatenate all of the files together, take a hash (like an MD5 sum) of the content, and create a file name based on that hash.

So for example, if you had:

• source/assets/reset.css
• source/assets/main.css
• source/assets/fonts.css

You could clear out the output assets directory, which is separate from the source assets directory so you don't overwrite anything, then concatenate these 3 files together, take the MD5 hash, and then create a file named application-$hashvalue.css, and write the contents to it.

Concatenating is helpful, but you could also run it through a minifier such as CSSMin, JSMin, Google's Closure Compiler, and many others.

Now that's all if you want to do it by yourself, by hand. You're of course not the first person to solve this problem, and there are a variety of tools to do this for you.

An general example set of tools to do this for you:

Grunt , as a task runner. Sort of a supervisor of everything else. Uglify , a minifier for JS SASS + Compass to manage and minify your CSS grunt-contrib-uglify : a plugin to connect Grunt to Uglify grunt-contrib-compass : a plugin to connect Grunt to Compass

So then you just run your grunt file and it will compile everything out for you. You could do this during deployments or have a directory watcher running locally.

PHP-specific asset management:

https://github.com/kriswallsmith/assetic

Unfortunately that's the only one I know of, as I don't use PHP much anymore.