使用Webpack 2和React Router进行CSS代码分割
我正在使用React Router和Webpack 2来分割我的JavaScript文件，如下所示：
export default {
path: '/',
component: Container,
indexRoute: {
getComponent(location, cb) {
if (isAuthenticated()) {
redirect();
} else {
System.import('../landing-page/LandingPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
},
childRoutes: [
{
path: 'login',
getComponent(location, cb) {
System.import('../login/Login')
.then(loadRoute(cb))
.catch(errorLoading);
},
},
{ /* etc */
}
};
此捆绑包的结果如下：
public/
vendor.bundle.js
bundle.js
0.bundle.js
1.bundle.js
2.bundle.js
这意味着最终用户只能根据他/她所在的路线获取他/她需要的JavaScript。
问题是：对于CSS部分，我没有找到任何资源来做同样的事情，这是根据用户的需要拆分CSS。
有没有办法用Webpack 2和React Router来完成它？
是的，这可以做到。 你需要CommonsChunkPlugin除了ExtractTextPlugin 。 另外，定义多个入口点
entry: {
A: "./a",
B: "./b",
C: "./c",
},
并配置ExtractTextPlugin以使用入口点名称作为CSS文件名
new ExtractTextPlugin({
filename: "[name].css"
}),
在这里查看完整的示例：
https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle
虽然我可能没有回答你的问题如何分割CSS文件，只有必要的加载方式，你想要回答的问题（没有插件或类似的东西），我希望给你一个可能的选择。
styled-components使用新的ES6特征标签模板文字来设置javascript文件内的组件。 我认为使用这个库会解决你只加载必要的css文件的问题，因为本身不会有更多的css文件。
react-boilerplate选择styled-components在sass上，因为
styled-components有一个更强大的方法：它不是试图给出一个样式语言的编程能力，而是将逻辑和配置拉入到这些功能所属的JS中。
因此，使用styled-components不仅能解决只加载必要的CSS的问题，而且还会进一步增加应用程序的解耦，使测试应用程序的设计和原因变得更加容易。
这里是现场演示，您可以尝试使用styled-components并检查它的工作原理。