[CSS] Purgecss to remove unused css

Install Purgecss to remove unused CSS

npm install @fullhuman/postcss-purgecss --save-dev

Edit postcss.config.js:

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    process.env.NODE_ENV === "production" &&
      require("@fullhuman/postcss-purgecss")({
        // add all the html files
        content: ["./src/**/*.vue", "./public/index.html"],
        defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
      }),
  ],
};

Then run npm run build, you will notice that the generate css file size down from 186602 lines to 600 lines.

posted @ 2021-10-17 03:30  Zhentiw  阅读(103)  评论(0编辑  收藏  举报