webpack-contrib / purifycss-webpack

UNMAINTAINED, use https://github.com/FullHuman/purgecss-webpack-plugin
MIT License
772 stars 37 forks source link

PurifyCSS has reduced the file size by ~0.0% #58

Closed IAMtheIAM closed 8 years ago

IAMtheIAM commented 8 years ago

I am having trouble getting it working. My config:

   new ExtractTextPlugin({
         filename: cssOutput,
         disable: false,
         allChunks: true
      }),

      /**
       * Plugin: PurifyCSS WebPack Plugin
       * Description: This is a plugin for WebPack that utilizes PurifyCSS to clean your CSS. Its dead simple, but it requires you to be prepared.
       *
       * See: https://github.com/purifycss/purifycss-webpack-plugin
       */

      new PurifyCSSPlugin({
         basePath: helpers.paths.root,
         paths: [
            "/src/app-components/**/*.template.html",
            "/src/app-components/**/*.component.ts",
         ],
         purifyOptions: {
            minify: true,
            info: true,
            output: 'wwwroot/css/purified',
            rejected: true,
            // whitelist: []

         }
      }),

I modified the plugin so it tells me which css assets it detects. It finds 2 css bundles as it should. But then it does nothing to them.

Hello purifyCSS-webpack-plugin
Happy[js]: Version: 2.1.3. Using cache? no. Threads: 5 (shared pool)
Happy[js]: All set; signalling webpack to proceed.
Checking for purifyable CSS.
We found a CSS. So purify it.
/css/app.style.css?43b887ad5e2f64648285
We found a CSS. So purify it.
##################################
/css/vendors.style.css?43b887ad5e2f64648285
PurifyCSS has reduced the file size by ~0.0%
##################################
This function took:  3134 ms
##################################
Rejected selectors:

##################################
##################################
PurifyCSS has reduced the file size by ~0.0%
##################################
This function took:  1951 ms
##################################
Rejected selectors:

##################################

Why is it not purifying them?

IAMtheIAM commented 8 years ago

It is necessary to add resolveExtensions: ['.html'], to the plugin object, like this.

      new PurifyCSSPlugin({
         basePath: helpers.paths.root,
         paths: [
            "/src/app-components/**/*.template.html",
            "/src/app-components/**/*.component.ts",
         ],
         resolveExtensions: ['.html'],
         purifyOptions: {
            minify: true,
            info: true,
            output: 'wwwroot/css/purified',
            rejected: true,
            // whitelist: []

         }
      }),

Now.

PurifyCSS has reduced the file size by ~85.0%
PurifyCSS has reduced the file size by ~67.6%

See : https://github.com/purifycss/purifycss-webpack-plugin/issues/55#issuecomment-248354694