Usuń nieużywane css z React i Webpack

Próbuję usunąć nieużywane klasy css z mojej aplikacji przy użyciu purify-css dla WebPack.Usuń nieużywane css z React i Webpack

Aby zbudować ten projekt, używam React, scss, WebPack i PostCss do budowania i kompilowania wszystkiego.

Do tej pory udało mi się osiągnąć postęp, ale coś jest nie tak i nie wiem dlaczego, ale oczekiwany wynik nie jest prawidłowy. Mam bardzo podstawowej konfiguracji tylko do testowania tych scenariuszy, więc to jest mój index.html i app.js pliki (tylko pliki mam tak daleko):

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"));

na plikach css używam Normalize.css (z bandą css classess) i zaledwie 3 niestandardowych klasach:

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

.my-heading { 
    color: red; 
} 

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

Oczekiwany wynik powinien zawierać tylko te klasy:

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

Jednak ma kilka innych klas:

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

Dlaczego tak się dzieje? Usuwa prawie wszystkie klasy, które powinny, ale niektóre z nich wciąż tu są i klasy, które wyraźnie nie są używane w pliku indeksu. Nie wiem, czy utrzymują się one z powodu innej deklaracji po stronie React, ale mam na myśli tylko pliki src. To jest mój css oczyścić-config:

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

Źródło

2017-08-02 celsomtrindade

Ten sam problem. Znalazłeś rozwiązanie? – BugHunterUK

@BugHunterUK jeszcze nie. Sposób, w jaki udało mi się go "sprawić", nie usuwa wszystkich nieużywanych klas. Zawsze coś pozostało. – celsomtrindade

Można spróbować tej próbki webpack.config, pozbawia on wszystkie niewykorzystane zajęcia z CSS i Sass plików, jednak dodaje klas z 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 } 
    }), 
...

Źródło

2017-10-09 16:12:51

Usuń nieużywane css z React i Webpack

Odpowiedz

Powiązane problemy