清除未使用CSS

像Bootstrap框架的CSS文件，我们只会用到其中的一部分。purifycss可以帮助解决这个问题。

设置purifycss

安装npm i purifycss-webpack-plugin --save-dev，另外安装npm i purecss --save-devcss框架方便演示

  1. // webpack.config.js文件
  2. ...
  3. const PATHS = {
  4.   app: path.join(__dirname, 'app'),
  5.   style: [
  6.     path.join(__dirname, 'node_modules', 'purecss'),
  7.     path.join(__dirname, 'app', 'main.css')
  8.   ],
  9.   //style: path.join(__dirname, 'app', 'main.css'),
  10.   build: path.join(__dirname, 'build')
  11. };
  12. ...
  1. // app/component.js文件
  2. module.exports = function () {
  3.   var element = document.createElement('h1');
  4.   element.className = 'pure-button';
  5.   element.innerHTML = 'Hello world';
  6.   return element;
  7. };
  1. // libs/parts.js 文件
  2. const webpack = require('webpack');
  3. const CleanWebpackPlugin = require('clean-webpack-plugin');
  4. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  5. const PurifyCSSPlugin = require('purifycss-webpack-plugin');
  6. ...
  7. exports.purifyCSS = function(paths) {
  8.   return {
  9.     plugins: [
  10.       new PurifyCSSPlugin({
  11.         basePath: process.cwd(),
  12.         // 不处理路径部分，可以使用 glob's documentation
  13.         paths: paths
  14.       }),
  15.     ]
  16.   }
  17. }
  1. // webpack.config.js
  2. ...
  3. switch(process.env.npm_lifecycle_event) {
  4.   case 'build':
  5.     config = merge(
  6.       ...
  7.       parts.minify(),
  8.       parts.extractCSS(PATHS.style),
  9.       //必须在执行extractCSS之后
  10.       parts.purifyCSS([PATHS.app])
  11.     );
  12.   default:
  13.     ...
  14. module.exports = validate(config);

执行npm run build生成的css文件会变小，更多purifyCss配置

<<上一节:拆分CSS >>下一节:分析构建静态文件