If used properly, Laravel Mix and webpack should take care of all the necessary module bundling and minification for you. However, you may have some legacy code or vendor libraries that need to be concatenated and minified. Not a problem.
Combine Files
Consider the following snippet:
This will naturally merge one.js and two.js into a single file, called merged.js. As always, during development, that merged file will remain uncompressed. However, for production (export NODE_ENV=production), this command will additionally minify merged.js.
Combine Files With Babel Compilation
If you need to concatenate JavaScript files that have been written in ES2015, you may update your mix.combine() call to mix.babel(). The method signature is identical. The only difference is that, after the files have been concatenated, Laravel Mix will perform Babel compilation on the result to transform the code to vanilla JavaScript that all browsers can understand.
Squeezer helps you compile, minify and compress your web sources and images - html, css, javascript, coffeescript, less, typescript, sass, scss - with just one click. Minify, Compile and Compress your web dev files and images on Mac OSX.
- Download MinifyMe - Reduce the size of CSS and JavaScript files and combine multiple files into a single item using this simple and straightforward tool.
- Minification of CSS, using our free and easy to use CSS minifier tool is very simple. All you have to do is copy and paste your CSS code in the text box and click on the blue button that says “Minify CSS”. CSS Minifier with return you the results within seconds.
- CSS Minifier Online CSS Minifier/Compressor. Provides an API. Simple Quick and Fast. Written and hosted by Andrew Chilton (@andychilton) since 2009.
- Best App to Minify Javascript code and css code closed Ask Question Asked 8 years, 4 months ago. Active 8 years, 4 months ago. Viewed 32k times 15. As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate.
Minify Files
Similarly, you may also minify one or more files with the mix.minify() command.
There are a few things worth noting here:
- This method will create a companion
*.min.extfile. So minifyingapp.jswill generateapp.min.js. - Once again, the minification will only take place during a production build. (
export NODE_ENV=production). - There is no need to call
mix.combine(['one.js', 'two.js'], 'merged.js').minify('merged.js');Just stick with the singlemix.combine()call. It'll take care of both.
{note} Please note that minification is only available for CSS and JavaScript files. The minifier will not understand any other provided file type.
Minify CSS Code
Find out which CSS code on the page is better to compress
What is CSS minification
If the site uses CSS (Cascading Style Sheets), the server must pass them to the browser each time a resource is requested. And this affects the website speed. The more complex the style files, the longer the visitor will wait until the site is fully loaded. Using CSS compression can reduce code size and improve site performance.
How to minify CSS code
Check whether your page needs CSS compression using the tool above. If the page has some unoptimized parts of CSS you will see similar message as on the picture below.
Minify Css Webpack
After getting this info, try to use tools recommended by Google, like CSSNano and csso.