나는 CommonsChunkPlugin모든 진입 점을 살펴보고 그들 사이에 공통된 패키지 / 종속성이 있는지 확인하고 그들을 자신의 번들로 분리 한다는 일반적인 요점을 얻습니다 .

따라서 다음 구성이 있다고 가정합니다.

...
enrty : {
    entry1 : 'entry1.js', //which has 'jquery' as a dependency
    entry2 : 'entry2.js', //which has 'jquery as a dependency
    vendors : [
        'jquery',
        'some_jquery_plugin' //which has 'jquery' as a dependency
    ]
},
output: {
    path: PATHS.build,
    filename: '[name].bundle.js'
}
...

사용하지 않고 동고하면 CommonsChunkPlugin

3 개의 새로운 번들 파일로 끝납니다.

• entry1.bundle.js이는에서 전체 코드를 포함 entry1.js하고 jquery자체 런타임을 포함
• entry2.bundle.js이는에서 전체 코드를 포함 entry2.js하고 jquery자체 런타임을 포함
• vendors.bundle.js이는에서 전체 코드를 포함 jquery하고 some_jquery_plugin자체 런타임을 포함

jquery페이지에 잠재적으로 3 번 로드 할 것이기 때문에 이것은 분명히 나쁘기 때문에 우리는 그것을 원하지 않습니다.

동봉하면 CommonsChunkPlugin

내가 전달하는 인수에 따라 CommonsChunkPlugin다음 중 하나가 발생합니다.

• 사례 1 : 통과 { name : 'commons' }하면 다음 번들 파일이 생성됩니다.

  • entry1.bundle.js이는에서 전체 코드 포함 entry1.js에 대한 요구 사항을, jquery그리고 런타임을 포함하지 않는
  • entry2.bundle.js이는에서 전체 코드 포함 entry2.js에 대한 요구 사항을, jquery그리고 런타임을 포함하지 않는
  • vendors.bundle.js이는에서 전체 코드 포함 some_jquery_plugin에 대한 요구 사항을, jquery그리고 런타임을 포함하지 않는
  • commons.bundle.js완전한 코드를 jquery포함하고 런타임을 포함합니다.

  이렇게하면 전체적으로 더 작은 번들로 끝나고 런타임이 commons번들에 포함됩니다 . 꽤 괜찮지 만 이상적이지는 않습니다.

• CASE 2 : 통과 { name : 'vendors' }하면 다음 번들 파일이 생성됩니다.

  • entry1.bundle.js이는에서 전체 코드 포함 entry1.js에 대한 요구 사항을, jquery그리고 런타임을 포함하지 않는
  • entry2.bundle.js이는에서 전체 코드 포함 entry2.js에 대한 요구 사항을, jquery그리고 런타임을 포함하지 않는
  • vendors.bundle.js여기에는 완전한 코드 jquery와 some_jquery_plugin런타임이 포함됩니다.

  이렇게하면 전체적으로 더 작은 번들로 끝나지만 이제 런타임이 vendors번들에 포함됩니다 . 런타임이 이제 vendors번들 에 있기 때문에 이전 사례보다 약간 더 나쁩니다 .

• CASE 3 : 통과 { names : ['vendors', 'manifest'] }하면 다음 번들 파일이 생성됩니다.

  • entry1.bundle.js이는에서 전체 코드 포함 entry1.js에 대한 요구 사항을, jquery그리고 런타임을 포함하지 않는
  • entry2.bundle.js이는에서 전체 코드 포함 entry2.js에 대한 요구 사항을, jquery그리고 런타임을 포함하지 않는
  • vendors.bundle.js이는에서 전체 코드를 포함 jquery하고 some_jquery_plugin및 런타임을 포함하지 않는
  • manifest.bundle.js 다른 모든 번들에 대한 요구 사항을 포함하고 런타임을 포함합니다.

  이렇게하면 전체적으로 더 작은 번들로 끝나고 런타임이 manifest번들에 포함됩니다 . 이것이 이상적인 경우입니다.

내가 이해하지 못하는 것 / 이해할 수없는 것

• 에서 CASE 2 왜 우리는 끝낼 않았다 vendors모두 공통 코드 (포함 된 번들 jquery로부터 남아 무엇이든)과 vendors항목을 ( some_jquery_plugin)? 내 이해에서 CommonsChunkPlugin여기서 한 일은 공통 코드 ( jquery)를 모아서 vendors번들 로 출력하도록 강제했기 때문에 공통 코드를 vendors번들 로 "병합"한 것 입니다. some_jquery_plugin). 확인하거나 설명하십시오.

• CASE 3 에서는 { names : ['vendors', 'manifest'] }플러그인에 전달했을 때 무슨 일이 있었는지 이해할 수 없습니다 . 왜 / 어떻게 vendors번들이 손상되지 않았고, jquery와 둘 다 포함되어 있으며 some_jquery_plugin, 언제 jquery는 공통 종속성이며, 생성 된 manifest.bundle.js파일이 생성 된 방식대로 생성 된 이유는 무엇입니까 (다른 모든 번들이 필요하고 런타임 포함)?

이것이 CommonsChunkPlugin작동 하는 방식입니다.

공통 청크는 여러 항목 청크가 공유하는 모듈을 "수신"합니다. 복잡한 구성의 좋은 예는 Webpack 저장소 에서 찾을 수 있습니다 .

는 CommonsChunkPlugin청크가 밀봉 디스크에 기록하기 직전, 그것은 메모리 동작 함을 의미 웹팩의 최적화 단계 동안 실행됩니다.

여러 개의 공통 청크가 정의되면 순서대로 처리됩니다. 귀하의 경우 3에서는 플러그인을 두 번 실행하는 것과 같습니다. 그러나 CommonsChunkPlugin는 모듈 이동 방식에 영향을 미치는 더 복잡한 구성 (minSize, minChunks 등)을 가질 수 있습니다.

사례 1 :

1. 이 3 개 있습니다 entry청크 ( entry1, entry2및 vendors).
2. 구성은 commons청크를 공통 청크로 설정합니다 .
3. 플러그인은 commons공통 청크를 처리합니다 (청크가 존재하지 않기 때문에 생성됨).
   1. : 이것은 더 다른 청크 번 이상 사용되는 모듈 수집 entry1, entry2및 vendors사용 jquery모듈이 덩어리를 제거하고, 추가되도록 commons덩어리.
   2. commons청크는 것으로 표시된다 entry그동안 청크 entry1, entry2및 vendors청크로 표시 해제된다 entry.
4. 마지막으로 commons청크는 entry청크이므로 런타임과 jquery모듈을 포함합니다 .

사례 2 :

1. 이 3 개 있습니다 entry청크 ( entry1, entry2및 vendors).
2. 구성은 vendors청크를 공통 청크로 설정합니다 .
3. 플러그인은 vendors공통 청크를 처리합니다 .
   1. 다른 청크에서 두 번 이상 사용되는 모듈을 수집 entry1하고 entry2사용 jquery하여 이러한 청크에서 모듈을 제거합니다 ( 청크에 이미 포함되어 vendors있으므로 vendors청크에 추가되지 않음 ).
   2. vendors덩어리는 것으로 표시되어 entry그동안 덩어리 entry1와 entry2덩어리는 다음과 같이 표시 해제된다 entry.
4. 마지막으로 vendors청크는 entry청크이므로 런타임과 jquery/ jquery_plugin모듈을 포함합니다.

사례 3 :

1. 이 3 개 있습니다 entry청크 ( entry1, entry2및 vendors).
2. 구성은 vendors청크와 manifest청크를 공통 청크로 설정합니다 .
3. 플러그인은 manifest존재하지 않는 청크를 생성 합니다.
4. 플러그인은 vendors공통 청크를 처리합니다 .
   1. 다른 청크에서 두 번 이상 사용되는 모듈을 수집 entry1하고 entry2사용 jquery하여 이러한 청크에서 모듈을 제거합니다 ( 청크에 이미 포함되어 vendors있으므로 vendors청크에 추가되지 않음 ).
   2. vendors덩어리는 것으로 표시되어 entry그동안 덩어리 entry1와 entry2덩어리는 다음과 같이 표시 해제된다 entry.
5. 플러그인은 manifest공통 청크를 처리합니다 (청크가 존재하지 않기 때문에 생성됨).
   1. 다른 청크에서 두 번 이상 사용되는 모듈을 수집합니다. 두 번 이상 사용되는 모듈이 없으므로 모듈이 이동되지 않습니다.
   2. manifest청크로 플래그가 entry그동안 덩어리 entry1, entry2그리고 vendors으로 표시 해제된다 entry.
6. 마지막으로 manifest청크는 entry청크이므로 런타임을 포함합니다.

도움이되기를 바랍니다.