使用React和Webpack移除未使用的CSS

Question

使用React和Webpack移除未使用的CSS

reactjswebpackpurifycss

23

我正在尝试使用purify-css来移除应用程序中未使用的css类。

为了构建这个项目，我使用了React、scss、WebPack和PostCss来构建和编译所有内容。

到目前为止，我已经有所进展，但是出现了一些问题，我不知道为什么，预期的结果不正确。我只有非常基本的设置来测试这些场景，所以这是我的index.html和app.js文件（到目前为止，我的唯一文件）：

index.html

<body>
    <nav>
        <a href="">home</a>
    </nav>
    <hr />
    <div id="app"></div>
    <footer class="my-other-heading"></footer>
</body>

app.js

class App extends React.Component {
    render() {
        return (
            <h1 className="my-other-heading">Mamamia!</h1>
        );
    }
}

render(<App />, window.document.getElementById("app"));

我在使用CSS文件时，使用了Normalize.css（带有一堆CSS类）和仅仅3个自定义类：

.my-class {
    background-color: #CCDDEE;
}

.my-heading {
    color: red;
}

.my-other-heading {
    color: blue;
}

期望的输出应该只包含以下这些类：

html, body, nav, a, hr, div, footer, h1, .my-other-heading

然而，它还有一些其他的类：

.my-heading, h2, h3, h4, [type='checkbox'] (and other similar, e.g.: [type='button']

为什么会出现这种情况？它几乎删除了应该删除的所有类，但有一些仍然存在，并且这些类显然没有在索引文件上使用。我不知道它们是否因为React方面的其他声明而继续存在，但我只参考了源代码文件。以下是我的purify-css配置：

new PurifyCSSPlugin({
  paths: glob.sync([
    path.join(__dirname, '..', 'src', '**/*.html'),
    path.join(__dirname, '..', 'src', '**/*.js'),
  ]),
})

- celsomtrindade

同样的问题。你找到解决方案了吗？ - BugHunterUK

@BugHunterUK 还没有。我能让它“工作”的方式并不能删除所有未使用的类。总会有一些东西留下来。 - celsomtrindade

2个回答

1

你可以尝试使用这个webpack.config示例，它会从CSS和SASS文件中剥离所有未使用的类，但是会添加来自normalize.css的类。

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
          publicPath: '/dist'
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
          publicPath: '/dist'
        })
      },  
...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack2 - purify css',
      minify: {
        collapseWhitespace: true,
      },
      hash: true,
      template: './src/index.html'
    }),
    new ExtractTextPlugin({
      filename: '[name].css',
      disable: false,
      allChunks: true
    }),
    new PurifyCSSPlugin({
      paths: glob.sync(path.join(__dirname, 'src/*.html')),
      purifyOptions: { info: true, minify: false }
    }), 
...

- Jorge C

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xurei · Accepted Answer

根据我的经验（15+年的Web开发），尝试自动删除CSS通常会带来更多问题，而不是解决问题。

类名可能会在运行时以意外的方式发生更改。自动删除CSS有点类似于停机问题：通常无法解决，也不可靠。

我不知道为什么你没有获得应该明显存在的类。但是我认为你首先不应该尝试做这件事。

到目前为止，对我来说最好/唯一的解决方案是手动处理并尽量保持清洁。

我意识到这可能不是你要寻找的答案。