众里千寻

像 Bootstrapopen in new window 和 Tailwindopen in new window 这类的框架通常都会有很多的样式，有时候我们仅仅使用了一个功能，却不得不引入一个庞大的样式包。本篇介绍一些删除多余样式的方法。

PurgeCSS

PurgeCSSopen in new window 通过分析代码，可以分析出哪些样式类被使用，从而将未被使用的样式从项目中移除。我们以 Tailwind 为例做个说明，如何使用 PurgeCSS。

安装 Tailwind

npm add tailwindcss postcss-loader --develop
1

我们需要借助与 PostCSS 来使用 Tailwind。

webpack.parts.js

exports.tailwind = () => ({
  loader: 'postcss-loader',
  options: {
    postcssOptions: { plugins: [require('tailwindcss')()] },
  },
});
1
2
3
4
5
6

webpack.config.js

const cssLoaders = [parts.tailwind()];

const commonConfig = merge([
  ...// parts.extractCSS(),
  parts.extractCSS({ loaders: cssLoaders }),
]);
1
2
3
4
5
6

在项目中导入 Tailwind 的样式

src/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background: cornsilk;
}
1
2
3
4
5
6
7

在代码中使用 Tailwind 的样式类 src/component.js

export default (text = 'Hello world') => {
  const element = document.createElement('div');
  element.className = 'rounded bg-red-100 border max-w-md m-4 p-4';
  element.innerHTML = text;
  return element;
};
1
2
3
4
5
6

启动开发服务器，npm run start, 查看浏览器结果 da07c43af07e0642f092dc1e1a8da0e4.png

执行构建，npm run build, 输出如下：

⬡ webpack: Build Finished
⬡ webpack: asset main.css 3.39 MiB [compared for emit] [big] (name: main)
  asset index.html 229 bytes [compared for emit]
  asset main.js 193 bytes [emitted] [minimized] (name: main)
  Entrypoint main [big] 3.39 MiB = main.css 3.39 MiB main.js 193 bytes
  orphan modules 266 bytes [orphan] 2 modules
  code generated modules 365 bytes (javascript) 3.39 MiB (css/mini-extract) [code generated]
    ./src/index.js + 2 modules 365 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/main.css 3.39 MiB [code generated]
1
2
3
4
5
6
7
8
9

从构建结果中可以看到，样式文件变大了，有 3.39 MB. 我们用 PurgeCSS 来优化一下。

安装 purgecss-webpack-pluginopen in new window 插件

npm add glob purgecss-webpack-plugin --develop
1

修改配置 webpack.parts.js

const path = require('path');
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

const ALL_FILES = glob.sync(path.join(__dirname, 'src/*.js'));

exports.eliminateUnusedCSS = () => ({
  plugins: [
    new PurgeCSSPlugin({
      paths: ALL_FILES, // Consider extracting as a parameter
      extractors: [
        {
          extractor: (content) =>
            content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
          extensions: ['html'],
        },
      ],
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

webpack.config.js

// const productionConfig = merge([]);
const productionConfig = merge([parts.eliminateUnusedCSS()]);
1
2

执行构建，npm run build, 输出结果如下：

⬡ webpack: Build Finished
⬡ webpack: asset main.css 7.52 KiB [emitted] (name: main)
  asset index.html 229 bytes [compared for emit]
  asset main.js 193 bytes [compared for emit] [minimized] (name: main)
  Entrypoint main 7.71 KiB = main.css 7.52 KiB main.js 193 bytes
  orphan modules 266 bytes [orphan] 2 modules
  code generated modules 365 bytes (javascript) 3.39 MiB (css/mini-extract) [code generated]
    ./src/index.js + 2 modules 365 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/main.css 3.39 MiB [code generated]
  webpack 5.11.1 compiled successfully in 4901 ms
1
2
3
4
5
6
7
8
9
10

可以看到，输出样式减小到了 7.52 KB.

uncssopen in new window 是 PurgeCSS 的一个替代方案，可以作为 PostCSS 的插件来使用。

critical-path-css-tools

critical-path-css-toolsopen in new window 换了一个角度，不减少构建结果的大小，而是从关键渲染路径的角度出发，先渲染页面，然后通过分析关键渲染路径上的样式使用来确定哪些样式需要优先加载。

总结

使用 PurgeCSS 可以有效的帮助我们减小构建结果的大小。在构建使用了样式框架的静态站点时尤为适用。

PurgeCSS 通过静态分析源代码的形式来检测未被使用的样式。

我们通过 purgecss-webpack-plugin 这个插件来使用 PurgeCSS。

通常情况下，PurgeCSS 可以帮助我们移除大部分的未使用样式，但是如果代码中的样式都是动态引用的，那么移除效果会打个折扣。

关键路径渲染是另一种 CSS 优化策略，旨在尽快的展示内容，而不是等待所有样式加载完之后才渲染。

关注微信公众号，获取最新推送~

加微信，深入交流~