Extrahieren einer CSS-Datei pro Webpack Chunk (require.ensure)

Question

Beim Versuch, Seitenoptimierungen in unserer App zu implementieren, möchten wir separate CSS-Dateien pro Webpack-Chunk generieren, um die Seitenrendering-Leistung für die erste Seite in unserer Anwendung zu verbessern. Um das zu erreichen, haben wir versuchen Extrakt-Text-Plugin in Kombination mit require.ensure zu verwenden wie so:

const $ = require('load-webpack-plugins')(); 
module.exports = { 
    entry: { 'app': './src/app.js' }, 
    output: { 
    path: 'dist', 
    filename: '[name].js' 
    }, 
    devtool: 'source-map', 
    module: { 
    loaders: [ 
     { test: /\.js$/, use: [{ loader: 'babel-loader' }] }, 
     { 
     test: /\.css$/, 
     use: $.ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [{ loader: 'css-loader' }] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new $.ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: true }), 
    new $.NamedModulesPlugin(), 
    ] 
} 

mit app.js Wesen:

console.log('this is app.js'); 

require.ensure([], require => { 
    require('./a.css'); 
}, 'base'); 

require.ensure([], require => { 
    require('./b.css'); 
}, 'first'); 

require.ensure([], require => { 
    require('./c.css'); 
}, 'second'); 

und a.css Wesen:

.a { 
    color: red; 
} 

und b.css Wesen:

.b { 
    color: red; 
} 

und c.ss Wesen:

.c { 
    color: red 
} 

Problem ist bekommen wir nur eine CSS-Datei dist/app.e2e9da337e9ab8b0ca431717de3bea22.css mit Inhalt aller drei Stücke:

.a { 
    color: red; 
} 

.b { 
    color: red; 
} 

.c { 
    color: red 
} 


/*# sourceMappingURL=app.e2e9da337e9ab8b0ca431717de3bea22.css.map*/ 

wie gehen wir über eine CSS-Extraktion Datei pro Webpack Chunk (require.ensure) in diesem Fall? sollte dies sogar von extract-text-plugin unterstützt werden.

PS: Hier ist ein Beispiel-Repository dieses Problem zu demonstrieren - https://github.com/osdevisnot/extract-text-demo

Answer 1

Extrakt-Text-Plugin extrahieren nicht auf Split-Punkte.
Durch die Übergabe {allChunks: true} extrahiert es alle CSS in allen Chunks und legt eine CSS-Datei.
Aber es löst Ihr Problem nicht.

Dafür können Sie versuchen extract-css-chunks-webpack-plugin speziell für diesen Anwendungsfall mit Extract-Text-Plugin erstellt.