Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Combine and Minify Multiple CSS / JS Files

Tags:

javascript

css

optimization

yui-compressor

http-compression

I am trying to optimize a site performance by consolidating and compressing the CSS and JS files. My question is more about the (concrete) steps on how to achieve this, given a real situation I was facing (should be typical among other developers too, though).

My page references several CSS and JS files like the following:

<!--   It's easier to work on smaller files during development.   Hence, the multiple CSS and JS files. --> <link type="text/css" rel="stylesheet" href="/css/main.css" /> <link type="text/css" rel="stylesheet" href="/css/secondary-1.css" /> <link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />  <script type="text/javascript" src="/scripts/js/main.js"></script> <script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script> <script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

For the production release, I'd like to combine the 3 CSS files into one and minify it using e.g. YUI Compressor. But then, I'd need to update all pages that needs these 3 files to reference to the newly-minified CSS. This seems error-prone (e.g. you're removing and adding some lines in many files). Any other less-risky approach? The same issue for the JS files.

like image 870
moey Avatar asked Feb 15 '12 04:02

moey

People also ask

How do I combine multiple CSS files into one?

To combine external CSS files, you can simply copy / paste all of your CSS code into one main file. Therefore all of the content from within the other CSS files will now reside within the main file allowing the browser to only make one request for a CSS file instead of multiple.

How do you minify CSS and JS files?

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.

Should I combine CSS files?

With HTTP/2, there is generally no need to combine CSS/JS files as the multiplexing feature eliminates the need for concurrent connections (unlike HTTP/1.1). Don't combine your CSS/JS files when you're on HTTP/2 or if your page has many scripts and stylesheets.

1 Answers

Check out minify - it allows you combine multiple js, css files into one just by stacking them into a url, e.g.

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

We've used it for years and it does a great job and does it on the fly (no need to edit files).

like image 71
Noodles Avatar answered Oct 02 '22 00:10

Noodles
Sign in to Comment

Related questions

Download an image using Axios and convert it to base64
create object using variables for property name [duplicate]
Checkbox Check Event Listener
Open popup and refresh parent page on close popup
How to get the hours difference between two date objects? [duplicate]
Include CSS,javascript file in Yii Framework
Set mouse focus and move cursor to end of input using jQuery
Object Dump JavaScript
How to scroll the window using JQuery $.scrollTo() function
How to Add a new native class to WebWorker's context in JavaScriptCore?
Node.js can't create Blobs?
JavaScript frameworks to build single page applications [closed]
AngularJS: Basic example to use authentication in Single Page Application
Paste an image from clipboard using JavaScript [duplicate]
How to load images dynamically (or lazily) when users scrolls them into view
Is it possible to save HTML page as PDF using JavaScript or jquery?
ECMAScript 6 class destructor
react useEffect comparing objects
Can I tell the Chrome script debugger to ignore jquery.js?
Do you put Babel and Webpack in devDependencies or Dependencies?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!