purifycss-webpack icon indicating copy to clipboard operation
purifycss-webpack copied to clipboard

Support Purifying on a per-Entrypoint basis

Open TheLarkInn opened this issue 8 years ago • 1 comments

Current Behavior

Currently when using purifycss-webpack with multi-entry (aka multi-page app) builds, the paths option is applied against every Entrypoint.

In multi-page app builds this can lead to unnecessary overhead as there may be a distinct set of paths on a per entry basis.

Desired Behavior

Paths can be configured on a per Entrypoint basis. Therefore if entryA only uses paths [x,y,z] and entryB uses [q,r,s], then only those paths will be applied and purify separate CSS entry points as needed.

Suggested Proposal

I have forked this repo at work and have devised a scenario that could be used as an option.

  1. paths property can be a function which is passed a entryName argument. The API may look something like this:
new PurifyCSSWebpackPlugin({
  paths: (entryName) => {
    const entryToPathsMap = {
      entryA: ["x.html", "y.html", "z.html"],
      entryB: ["q.html", "r.html", "s.html"],
      default: [...someDefaultPaths(), "shared.html"]
    };    
    
    return entryToPathsMap[entryName] || entryToPathsMap['defaut'];
  }
})

Optionally if we wanted to pass the whitelist and other options as well we could, but does increase complexity. Regardless this will allow css to be purified much more effectively on a per-entry bases and can allow for stripping some overhead.

TheLarkInn avatar May 22 '17 20:05 TheLarkInn

Same as this: https://github.com/webpack-contrib/purifycss-webpack/issues/106

What I suggested there would allow you to easily override any and all settings (paths, purifyOptions, disable) per entry.

I think it is actually easier to think about then what you show above (where each settings eg. paths gets it's own callback.

It could also be implemented in only a few lines of code.

crucialfelix avatar May 25 '17 06:05 crucialfelix