CSS 코드 분할과 반작용 라우터

Question

나는 내 자바 스크립트 파일을 분할 코드를 해요는 다음과 같이 라우터와 웹팩이 반응이 번들 결과

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 

어떤 그/그녀가있는 경로에 따라 최종 사용자가 자신이 필요로하는 자바 스크립트 만 얻고 있다는 것을 의미합니다.

문제는 : CSS 부분에 대해서는 CSS를 사용자의 필요에 따라 분할하는 것과 같은 일을하는 리소스를 찾지 못합니다.

Webpack 2 및 React Router로 할 수있는 방법이 있습니까?

Answer 1

예, 가능합니다. ExtractTextPlugin 외에도 CommonsChunkPlugin이 필요합니다. 또한, 여러 진입 점

entry: { 
    A: "./a", 
    B: "./b", 
    C: "./c", 
}, 

를 정의하고 CSS 파일 이름과 같은 진입 점 이름을 사용하는 ExtractTextPlugin를 구성

new ExtractTextPlugin({ 
    filename: "[name].css" 
}), 

여기에 전체 예를 참조하십시오 :

https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle

Answer 2

를 내가 수 있지만 귀하의 질문에 대답하지 않습니다 CSS 파일을 분할하여 필요한 것만로드하는 방법 질문에 답할 방법 (플러그인이 없거나 그런 종류의 질문)이 있으면 가능한 대안을 제시 할 수 있기를 바랍니다.

styled-components 새 ES6 기능 tagged template literal을 사용하여 javascript 파일의 구성 요소 스타일을 지정합니다. 나는이 라이브러리를 사용하면 필요한 CSS 파일을로드하는 문제를 해결할 수 있다고 생각한다. 왜냐하면 더 이상 CSS 파일이 없기 때문이다.

react-boilerplatechose styled-components over sass

,

styled-components

가 더 강력한 접근 방식을 가지고 있기 때문에 : 대신 스타일 언어를 프로그래밍 능력을 제공하기 위해 을 시도, 그것은 논리와 이러한 기능이 속한 JS에 구성 밖으로 가져옵니다.

그래서에만 필요한 CSS를 로딩의 문제를 해결할뿐만 아니라 styled-components를 사용하지만, 더 응용 프로그램의 디커플링에 추가 할 것입니다, 그것은 쉽게 응용 프로그램에 대한 디자인과 이유를 테스트 할 수 있습니다.

live demo 여기에 styled-components을 실험 해보고 작동 방식을 확인할 수 있습니다.