使用 Webpack 2 和 React Router 进行 CSS 代码拆分

Posted 2023-02-22

【中文标题】使用 Webpack 2 和 React Router 进行 CSS 代码拆分

【英文标题】：CSS Code Splitting with Webpack 2 and React Router

【发布时间】：2017-07-16 08:44:45

【问题描述】：

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

【问题讨论】：

你看到 CSS 代码拆分的文档了吗？ webpack.js.org/guides/code-splitting-css

@JakobLind 是的，我做到了。在文档中，唯一的方法是有多个条目。但是，如果我使用 React Router 并且只有一个条目，我怎么能有多个条目。

【参考方案1】：

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

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

react-boilerplatechose styled-components over sass，因为

styled-components 有一个更强大的方法：而不是尝试 为了赋予样式语言编程能力，它拉动逻辑和 把这些特性配置出来放到JS里面。

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

这是live demo，您可以在其中试验styled-components 并检查其工作原理。

【参考方案2】：

是的，这可以做到。除了ExtractTextPlugin，您还需要CommonsChunkPlugin。另外，定义多个入口点

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

【讨论】：

是否有 React Router 的示例，我认为这不适用于我的情况。

react-router 与 CSS bundle 的生成方式无关。

如果现在 React Router 是我的应用程序的单一入口点，我该如何放置多个入口点？