fokineu.blogg.se - Allmänt

#POSTCSS MINIFY HOW TO#
#POSTCSS MINIFY INSTALL#
#POSTCSS MINIFY UPDATE#
#POSTCSS MINIFY CODE#
#POSTCSS MINIFY PLUS#

However if you use the postcss-import plugin by Maxime Thirouin, you can combine Normalize.css into your main stylesheet, via use of the rule, giving you the same CSS with only one http request. Inline/Combine Files with than individually loading multiple stylesheets, it’s more efficient wherever possible to combine your stylesheets into one.įor example, use of Normalize.css is very common, but, if you load it as a standalone stylesheet before your main stylesheet, it requires multiple http requests, hence slowing down load time.

#POSTCSS MINIFY HOW TO#

That has all the plugins installed and loaded, so let’s move onto learning how to use them for minification and optimization.

#POSTCSS MINIFY UPDATE#

If you’re using Grunt, update the processors object, which is nested under the options object, to the following: processors: [ĭo a quick test that everything is working by running the command grunt postcss then checking that a new “style.css” file has appeared in your project’s “dest” folder. Now add each of those new variable names into your processors array: var processors = [ĭo a quick test that everything is working by running the command gulp css then checking that a new “style.css” file has appeared in your project’s “dest” folder. If you’re using Gulp, add these variables under the variables already in the file: var atImport = require('postcss-import') Now the plugins are installed, let’s go ahead and load them into your project.

#POSTCSS MINIFY INSTALL#

Install them by running the following command inside your project folder: npm install postcss-import css-mqpacker cssnano -save-dev

#POSTCSS MINIFY PLUS#

If you don't want to manually setup your project from scratch though, you can download the source files attached to this tutorial, and extract either the provided Gulp or Grunt starter project into an empty project folder. Then with a terminal or command prompt pointed at the folder run the command npm install.įor this tutorial we’re going to be using two individual plugins, plus a plugin pack.

PostCSS Quickstart Guide: Gulp Setup or.

You can read about how to setup Gulp or Grunt projects for PostCSS in the previous tutorials

#POSTCSS MINIFY CODE#

If you don't already have a preference for one or the other I recommend using Gulp as you'll need less code to achieve the same ends, so you should find it a bit simpler to work with. The first thing you’ll need to do is setup your project to use either Gulp or Grunt, depending on your preference. Use the cssnano pack to perform all kinds of optimizations from stripping white space and comments to minifying certain types of code and much more.

Combine matching media queries into one, allowing you to use the same media query in multiple locations during development but still end up with the efficiency of consolidated queries in your final stylesheet.

Combine multiple stylesheets into one via the rule, even if some of your stylesheets are coming from Bower components or npm modules, ensuring you need only a single http request to load your site’s CSS.

In this tutorial we’re going to learn how to make your stylesheets more efficient and load faster, by using PostCSS to perform various minification and optimization operations. If you’re using Tailwind CLI, you can minify your CSS by adding the -minify flag: npx tailwindcss -o build.In the last tutorial you learned how to use PostCSS to help make your stylesheets more cross browser compatible, in particular dealing with issues arising from support for legacy versions of IE. With CSS files this small, you don’t have to worry about complex solutions like code-splitting your CSS for each page, and can instead just ship a single small CSS file that’s downloaded once and cached until you redeploy your site.įor the smallest possible production build, we recommend minifying your CSS with a tool like cssnano, and compressing your CSS with Brotli. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network. Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project.Ĭombined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects.