Purgecss
  • Introduction
  • Configuration
  • CLI
  • JavaScript API
  • With Webpack
  • With PostCSS
  • With Gulp
  • With Grunt
  • With Rollup
  • Whitelisting
  • Extractors
  • Comparison
  • Guides
    • React
    • Vue
    • Next
    • Nuxt
    • Wordpress
Powered by GitBook
On this page
  • Example
  • Created with vue-cli
  • Results
  1. Guides

Vue

PreviousReactNextNext

Last updated 5 years ago

Example

You can see an example .

Created with vue-cli

This example shows how to set up PurgeCSS with vue-webpack template. Once you initialized your project with vue init webpack, install the webpack plugin for PurgeCSS:

npm i --save-dev glob-all purgecss-webpack-plugin

You need to modify the file webpack.prod.conf.js by adding the following code:

line 13

// import PurgeCSS webpack plugin and glob-all
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')

line 58

    // Remove unused CSS using PurgeCSS. See https://github.com/FullHuman/purgecss
    // for more information about PurgeCSS.
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, './../src/index.html'),
        path.join(__dirname, './../**/*.vue'),
        path.join(__dirname, './../src/**/*.js')
      ])
    }),

Results

This example is importing the bootstrap css framework. Without PurgeCSS, the css file size is 117 kB. Using PurgeCSS, the css file size is 2.98 kB

here