7

我正在使用 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 做到这一点？

4

2 回答 2

2

虽然我可能无法回答您的问题如何拆分 css 文件，以便仅以您希望回答问题的方式加载必要的文件（没有插件或类似的东西），但我希望给您一个可能的选择。

styled-components使用新的 ES6 特性标记模板文字来设置 javascript 文件中的组件的样式。我认为使用这个库可以解决你只加载必要的 css 文件的问题，因为本身不会有更多的 css 文件。

react-boilerplate 选择styled-components了 sass，因为

styled-components有一个更强大的方法：它不是试图赋予样式语言编程能力，而是将逻辑和配置提取到这些特性所属的 JS 中。

因此，使用styled-components不仅可以解决您仅加载必要的 css 的问题，而且还可以进一步增加应用程序的解耦，使测试应用程序的设计和推理变得更加容易。

这是现场演示，您可以在其中试验styled-components并检查其工作原理。

于 2017-03-09T17:53:45.377 回答
2

是的，这是可以做到的。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

于 2017-02-25T14:45:49.820 回答