Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does minification of css files using laravel mix work?

Why does minified file equal to a non-minified?

const { mix } = require('laravel-mix');

mix.styles([
    'public/some.css',
    'public/thing.css',
], 'public/css/index.css');

mix.minify('public/css/index.css');

When running npm run production, sizes are 128kB (both compressed)

   Asset       Size  Chunks             Chunk Names
               mix.js  511 bytes       0  [emitted]  mix
       /css/index.css     128 kB          [emitted]
   /css/index.min.css     128 kB          [emitted]

When running npm run dev, both files are of the same size and it is 160 kB, i.e. both are non-minified. How come a minified version is dependent not upon a min suffix, but on a dev\prod option?

like image 479
shukshin.ivan Avatar asked Nov 10 '17 06:11

shukshin.ivan


People also ask

What is minification of CSS?

Overview. Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

How does minification reduce file size?

How Minification Works. Minification works by analyzing and rewriting the text-based parts of a website to reduce its overall file size. Minification extends to scripts, style sheets, and other components that the web browser uses to render the site. Minification is performed on the web server before a response is sent ...

Does CSS minification increase page performance?

By stripping unnecessary data from the CSS code, minification helps the browser download and process these files faster, increasing page performance and improving user experience.

Does minification improve performance?

Minification is the process of minimizing code and markup in your web pages and script files. It's one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience.


1 Answers

As from this laravel-mix issue Jeffrey points out that minification only happens in production mode. So to minify your css files, you can have:

mix.styles([ 'public/some.css', 'public/thing.css', ], 'public/css/index.css')

Then running the following will concatenate and minify your files.

$ npm run production

Works for ([email protected])

like image 104
Sir Waithaka Avatar answered Sep 18 '22 16:09

Sir Waithaka