Удалите неиспользуемые CSS с помощью React и Webpack

Я пытаюсь удалить неиспользуемые классы CSS из моего приложения, используя Очистить -CSS для WebPack.

Для создания этого проекта я использую 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, но я ссылаюсь только на файлы src. Это мой конфиг Cleany-CSS:

new PurifyCSSPlugin({
  paths: glob.sync([
    path.join(__dirname, '..', 'src', '**/*.html'),
    path.join(__dirname, '..', 'src', '**/*.js'),
  ]),
})
Источник

1 ответ

По моему собственному опыту (15+ в веб-разработчиках), попытка автоматического удаления CSS всегда приносит больше проблем, чем решает.

Имена классов могут меняться во время выполнения, иногда неожиданным образом. Автоматическое удаление CSS в некоторой степени эквивалентно проблеме остановки: она не решаема в целом и не надежна в частности.

Я не знаю причину, по которой вы не получаете классы, которые, очевидно, должны быть там. Но я не думаю, что вам стоит в первую очередь пытаться это сделать.

Лучшее / единственное решение для меня до сих пор - делать это вручную и стараться содержать его в чистоте.

Я понимаю, что это может быть не тот ответ, который вы ищете.

Источник

Вы можете попробовать этот пример 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 }
    }), 
...
Источник
Другие вопросы по тегам