CSS代碼拆分並做出反應路由器

我的代碼分裂與我的JavaScript文件陣營路由器和2的WebPack像這樣：CSS代碼拆分並做出反應路由器

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做到這一點？

來源

2017-02-25 Matheus Lima

您是否看到過CSS代碼拆分的文檔？ https://webpack.js.org/guides/code-splitting-css/ –

@JakobLind是的，我做到了。在文檔中，唯一的是有多個條目。但是，如果我使用React Router並且只有一個條目，我怎麼能有多個條目。 –

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

來源

2017-02-25 14:45:49 m1kael

React Router有沒有一個例子，我不認爲這在我的情況下會起作用。 –

react-router與CSS bundle的生成方式無關。 – m1kael

如何使用React Router是我的應用程序的單一入口點？ –

雖然我可能不回答你的問題如何拆分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並檢查其工作原理。

來源

2017-03-09 17:53:45

CSS代碼拆分並做出反應路由器

回答

相關問題