웹팩 - splitChunksPlugin 구성 학습 에세이

이 코드는 멀리 끌어하도록 구성되어 있습니다. 공식 문서

공식 기본 구성 :

module.exports = { 
  // ... 
  최적화 : { 
    splitChunks : { 
      덩어리 '비동기', //异步引入
      MINSIZE : 30000, 
      이 maxSize : 0, 
      minChunks : 1, 
      maxAsyncRequests : 5, 
      maxInitialRequests : 3, 
      automaticNameDelimiter : '~ ' 
      automaticNameMaxLength : 30 
      이름 : 사실, 
      cacheGroups : {//缓存组
        업체 : { 
          테스트 : / [\\ /] node_modules [\\ /] /, 
          우선 순위 : -10 
        }, 
        기본값 : { 
          minChunks : 2, 
          우선 순위 : -20, 
          reuseExistingChunk : 사실 
        }  
      }
    }
  } 
};

 박스 아웃, 기본 매개 변수도.

용도 :

1, 타사 라이브러리의 분리 및 사용자 정의 공통 모듈없이

서드 파티 라이브러리, 공공 사용자 정의 모듈에서 분리 2, 웹팩 파일을 실행,하지만 그들은 같은 파일에

3, 단일 타사 라이브러리를 분리, 사용자 정의 공통 모듈이 실행 웹팩 파일, 다른 각 파일

4,5,6, ...

데모에.

프로젝트 구조 :

 다음과 같이 각 파일의 src 디렉토리의 내용은 매우 간단하다 :

/ * first.js * / 
가져 오기 '반응'에서 반작용; 
수입 './common'에서 {일반}; 
CONSOLE.LOG ( '제'+ 공통); 

/ * second.js * / 
가져 오기 '반응'에서 반작용; 
수입 './common'에서 {일반}; 
CONSOLE.LOG ( '제'+ 공통); 

/ * common.js를 * / 
수출 CONST 일반적인 = '일반적인 파일';

압축 된 결과의 기본 구성 :

 

보기 first.js 및 second.js이 공통 참조 문서를 발견하고 반응한다 common.js를 그것으로 포장된다. 너무 큰 공통 모듈 패키지를 반복합니다.

같은 파일에 저장, 타사 라이브러리에서 철수.

구성 :

최적화 { 
  splitChunks { 
    cacheGroups {// 캐시 그룹 
      벤더 { 
        테스트 / [\\ / 상기 node_modules [\\ /] / // 독특한 캐시 구성 매칭 파일 인 
        이름 '벤더', // 코드 파일 이름은 꺼내 
        덩어리를 '모두', // 동기 도입, 비동기의 도입 효과 소요 
        minChunks : 1, // 인용의 
        우선 순위 : 10 // 우선 순위를. 효과 때 복수의 그룹 
      } 
    } 
  } 
}

 위의 매개 변수를 제외하고, 매개 변수는 기본 매개 변수를 사용하도록 구성되어 있지 않습니다. MINSIZE : 30000, 30킬로바이트보다 큰 파일이 당겨졌다 것을 의미 기본 매개 변수가 있습니다.

포장 결과 :

 

 

 구성 : 테스트 / [\\ /] node_modules [\\ /] / 이름 '벤더. node_modules 라이브러리에서 도입이의 공급 업체 이름이 같은 파일로 포장됩니다.

일반적으로, 목적에 도달 할 수 타사 라이브러리에서 철수.

그리고 그는 꺼내 사용자 정의 공통 모듈을.

당신은 그냥 포장 first.js를 열면, second.js. 우리는이 공통 모듈이 그것으로 포장되어 있습니다. 동일한 모듈을 반복 포장 및 부피는 커진다.

플러스 cacheGroups의 구성 :

 

 포장 결과 :

 

 따라서, 일반적인 사용자 정의 모듈은 또한 꺼냈다.

그러나 첫 번째, 두 번째 패키지 파일 중. 너무 많이가 31 KB. 나머지는 웹팩 파일 및 비즈니스 코드를 실행합니다.

抽离webpack运行文件需配置runtimeChunk。如下:

 

 打包结果:

 

 打包文件中多了一个runtime.js。webpack运行文件也抽离出来了。

 

추천

출처www.cnblogs.com/caimuguodexiaohongmao/p/11504106.html