이전 연구 :

웹팩의 위키가 말했듯이 분석 도구를 사용하여 빌드 성능을 최적화 할 수 있습니다.

에서 : https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

빌드 통계의 힌트

빌드를 시각화하고 빌드 크기와 빌드 성능을 최적화 할 수있는 방법에 대한 힌트를 제공 하는 분석 도구 가 있습니다 .

webpack --profile --json> stats.json을 실행하여 필요한 JSON 파일을 생성 할 수 있습니다.

나는 (통계 파일을 생성 여기에 해당 ) 웹팩의 analize 도구에 업로드
하고 아래 힌트 탭 나는 prefetchPlugin을 사용했다 :

에서 : http://webpack.github.io/analyse/#hints

긴 모듈 빌드 체인

빌드 성능을 높이려면 프리 페치 를 사용하십시오 . 체인 중간 에서 모듈을 미리 가져옵니다 .

prefechPlugin에서 사용할 수있는 유일한 문서는 다음과 같습니다.

출처 : https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

요구가 발생하기 전에 해결되고 빌드되는 일반 모듈에 대한 요청입니다. 이것은 성능을 향상시킬 수 있습니다. 먼저 빌드를 프로파일 링하여 영리한 프리 페치 지점을 결정하십시오 .

내 질문 :

• prefetchPlugin을 올바르게 사용하는 방법은 무엇입니까?
• 분석 도구와 함께 사용하기에 적합한 워크 플로우는 무엇입니까?
• prefetchPlugin이 작동하는지 어떻게 알 수 있습니까? 어떻게 측정 할 수 있습니까?
• 체인의 중간에서 모듈 을 프리 페치 한다는 것은 무엇을 의미 합니까?

몇 가지 예를 정말 감사하겠습니다

prefechPlugin 및 분석 도구를 사용하려는 다음 개발자에게이 질문이 귀중한 리소스가되도록 도와주세요. 감사합니다.

예, 프리 페치 플러그인 문서는 거의 존재하지 않습니다. 스스로 알아 낸 후에는 사용하기가 매우 간단하고 유연성이별로 없습니다. 기본적으로 컨텍스트 (선택 사항)와 모듈 경로 (컨텍스트에 상대적)라는 두 개의 인수를 사용합니다. 귀하의 경우 컨텍스트는 /absolute/path/to/your/project/node_modules/react-transform-har/스크린 샷의 물결표가 node_moduleswebpack의 node_module 해상도를 참조한다고 가정합니다 .

실제 프리 페치 모듈은 이상적으로는 모듈 종속성 깊이가 3 개 이하이어야합니다. 따라서 귀하의 경우에는 isFunction.js빌드 체인이 긴 모듈이며 이상적으로는 미리 가져와야합니다.getNative.js

그러나 빌드 체인 종속성이 웹팩에 의해 자동으로 최적화되어야하는 모듈 종속성을 참조하기 때문에 구성에 펑키 한 부분이 있다고 생각합니다. 어떻게 얻었는지 모르겠지만 우리의 경우 node_modules의 긴 빌드 체인에 대한 경고가 표시되지 않습니다. 대부분의 긴 빌드 체인은 scss가 필요한 깊이 중첩 된 반응 구성 요소 때문입니다. 즉 :

어쨌든 다음과 같이 각 경고에 대해 새 플러그인을 추가해야합니다.

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

두 번째 인수는 모듈의 상대 위치에 대한 문자열이어야합니다. 이것이 의미가 있기를 바랍니다.

당신의 사슬의 중간은 아마도 중간 쯤에 react-transform-hmr/index.js시작될 것입니다 . 당신은 시도 할 수 PrefetchPlugin('react-transform-hmr/index')하고 빌드로 총 시간까지 속도를하는 데 도움이 있는지 확인하기 위해 프로필을 다시 실행하십시오.