Code Splitting

웹팩4의 가장 큰 변화는 Commons Chunk Plugin을 폐지하고optimization을 도입한 것이다.splitChunks
웹팩 4에서 weppack3의 Commons Chunk Plugin을 사용하면 다음과 같은 오류가 발생합니다.
(구성 파일 webpack3.config.js 실행) Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks
코드 분할(Code Splitting) 개념
우선 웹 패키지의 코드 분할은 무엇입니까?그것은 한 파일을 여러 파일로 분할할 수 있도록 해 준다.브라우저가 코드를 캐시한다는 사실 때문에 그렇다.어떤 파일에 대해 약간의 변화가 있을 때마다, 사이트를 방문하는 사람들은 의존을 포함해서 그것을 다시 다운로드해야 한다.만약 당신이 단독 파일로 분리한다면 방문자들은 그것을 여러 번 다운로드할 필요가 없을 것이다.
웹 패키지를 사용하여 원본 코드의 최종 버전을 포함하는 '포장된 파일' (bundles) 을 하나 이상 생성합니다. (개념적으로 우리는 하나의) chunks로 구성됩니다.
역할
공용 코드를 추출하는 방법:
코드의 중복성 감소
사용자 로드 속도 향상
한 페이지에서 다운로드를 줄이고 여러 페이지에서 캐시를 사용할 수 있다
다음은 splitchunks의 내용을 소개합니다.
구성 항목

module.exports = {
 //...
 optimization: {
  splitChunks: {
   chunks: 'async', 
   minSize: 30000,
   minChunks: 1,
   maxAsyncRequests: 5,
   maxInitialRequests: 3,
   automaticNameDelimiter: '~', 
   name: true,
   cacheGroups: {}
  }
 }
}

chunks: 어떤 코드가 최적화되어야 하는지를 나타낸다. 세 가지 선택할 수 있는 값이 있다. initial(초시 블록), async(필요에 따라 블록을 불러오는 것), all(모든 블록), 기본값은 async

이다.

minSize: 압축하기 전의 최소 모듈 크기를 나타냅니다. 기본값은 30000

입니다.

minChunks: 인용 횟수를 표시하고 기본값은 1

maxAsyncRequests: 필요에 따라 불러올 때 가장 큰 병렬 요청 수, 기본값은 5

maxInitialRequests: 하나의 입구에서 가장 큰 병렬 요청 수, 기본값은 3

automaticNameDelimiter:명명 연결부호

name: 블록의 이름을 분리하고 기본적으로 블록 이름과hash값이 자동으로 생성됩니다

cacheGroups: 캐시 그룹.캐시 그룹의 속성은 위의 모든 속성을 제외하고test,priority,reuseExistingChunk

test: 이 캐시 그룹에 일치하는 모듈을 제어하는 데 사용

priority: 캐시 그룹 패키지의 선후 우선순위

reuseExistingChunk: 현재 코드 블록에 포함된 모듈이 이미 있으면 새로운 코드 블록이 생성되지 않습니다

기본값
먼저 웹팩은 다음 조건에 따라 코드 블록 분할을 자동으로 수행합니다.

새 코드 블록은 공유로 인용되거나 이 모듈들은 node 에서 온 것이다modules 폴더 안

새 코드 블록이 30kb(min+gziped 이전 부피)보다 크다

불러올 코드 블록에 따라 병렬 요청의 최대 수량은 5

보다 작거나 같아야 한다.

처음 불러온 코드 블록, 병렬 요청의 최대 수량은 3

보다 작거나 같아야 합니다
블록 패키지는 기본적으로 요청 로드 모듈에만 영향을 줍니다. 초기 블록에 대한 최적화 패키지는 HTML의script 탭 수에 영향을 주고 요청 수를 증가시킬 수 있기 때문입니다.
예를 들면 다음과 같습니다.
모듈은 모두 동기화 도입

 // indexA.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 import _ from 'lodash'

 console.log(_.join(['a', 'b'], '~'))

 ReactDOM.render(
  <div>SplitChunkdiv>,
  document.getElementById('root')
)

기본값은 모듈을 불러오는 데만 영향을 미치기 때문에 모든 내용이 한데 묶여 있습니다.
모듈 동적 가져오기 있음

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import(/* webpackChunkName: "async-jquery" */ 'jquery').then(component => {
 console.log(component)
})

console.log(_.join(['a', 'b'], '~'))

ReactDOM.render(
 <div>SplitChunkdiv>,
 document.getElementById('root')
)

여기 jquery는 동적 가져오기를 사용합니다. 포장 결과에서 jquery가 단독으로 포장된 것을 볼 수 있습니다
chunks
chunks의 수치는 initial, async,all입니다.기본적으로 async
참고 사항:initial 모드에서 비동기와 비동기 모듈을 분리하여 포장합니다.all는 비동기와 비동기를 동시에 포장한다.즉, 모듈A는 indexA에서 비동기적으로 도입되고, indexB에서 동시 도입되며initial에서 모듈A는 두 개의 패키지 블록에 나타나고all는 하나만 나타난다.
cacheGroups
cache Groups를 사용하면 패키지 블록을 사용자 정의로 설정할 수 있습니다.

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import $ from 'jquery'

// indexB.js
import React from 'react'
import ReactDOM from 'react-dom'
import('lodash')
import $ from 'jquery'

// webpack.config.js
optimization: {
 splitChunks: {
  cacheGroups: {
  commons: {
   name: 'commons',
   chunks: 'initial',
   minChunks: 2
  }
  }
 }
}

처음에 웹apck의 분할 조건을 소개했을 때 일부 공공 모듈은commons에 묶여 있고 사용자 정의 블록의 우선순위는 0이기 때문에 현재 공공 모듈은commons에 묶여 있습니다. 위에서 언급한 기본 블록vendors (우선순위는 마이너스) 가 아니라.
근데 여기 왜 로더쉬가 같이 안 싸져 있지?인티리얼과 all의 차이를 되돌아볼 수 있습니다.다음은 all의 효과를 실험해 보자.

// indexA, indexB  
// webpack.config.js
optimization: {
 splitChunks: {
  cacheGroups: {
   commons: {
    name: 'commons',
    chunks: 'all',
    minChunks: 2
   }
  }
 }
}

결과는 예상 중,lodash가 한데 묶였다.
타사 라이브러리 추출
마지막으로 이전에 CommonsChunkPlugin에서 자주 사용했던 분리된 부분의 제3자 라이브러리 기능을 살펴보겠습니다.이쪽은 어떻게 조작하는지 생각해 보세요.
위에서 언급한 설정chunks: initial || all은 모두 제3자 라이브러리를 추출할 수 있다.그러나 이것은 모든 제3 라이브러리를 추출하는 것이기 때문에react와react-dom만 추출하는 상황에서cacheGroup을 사용자 정의해야 합니다.

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import $ from 'jquery'

// webpack.config.js
entry: {
 indexA: path.join(__dirname, 'src/indexA.js')
},
optimization: {
 splitChunks: {
  chunks: 'all',
  cacheGroups: {
   vendors: {
    test: /react/,
    name: 'vendors'
   }
  }
 }
}

우리는 vendors 패키지 블록을 다시 썼고 react와 일치하는 모듈만 패키지했기 때문에 이전의 Commons ChunkPlugin 기능에 도달했다.
최후
mainfast (파일과 파일 사이의 관련 코드)
오래된 버전 패키지에서 파일 간의 관련 코드는 각 관련 파일에서 그 중의 한 파일을 수정할 때 관련 코드가 바뀔 수 있고 수정되지 않은 파일의hash값도 따라서 바뀌며 파일 메모리가 커질 수 있다
runtime Chunk으로 이상 문제 해결
파일과 파일 사이의 관련 코드를runtime에 넣습니다.js 파일

runtimeChunk: { name: 'runtime'},
//   
runtimeChunk:'runtime'