purgecss 사용방법( 사용하지 않는 css 제거 라이브러리 )

1. npm으로 설치

npm install @fullhuman/postcss-purgecss

2. 사용할 모듈 추가, 페이지도 추가

module.exports = {
    plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('@fullhuman/postcss-purgecss')({
        content : [
 
            './src/**/*.vue',
            './public/index.html',
        ]
    })
    ]
}

3. 정규표현식 넣어주기

module.exports = {
    plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('@fullhuman/postcss-purgecss')({
        content : [
 
            './src/**/*.vue',
            './public/index.html',
        ],
        defaultExtractor: content => content.match(/[A-Za-z0-9_:/]+/g) || []
    })
    ]
}

4. 빌드

npm run build

5. tailwind.css 에 사용하지 않은 css가 제거 된다.

파일 용량도 줄겠지?