웹팩 2 브러시 5, 생산 환경 최적화(4.Code Splitting 코드 하도급/코드 분할)

코드 패키지 / 코드 분할

웹 패키지 기본 패키지에는 여전히 폐단이 있습니다.
모든 코드가 최종적으로 한데 묶이는 것이다.
프로젝트에서 코드가 복잡하고 모듈이 많으면 포장 결과가 크고 (bundle 부피가 너무 커서) 2, 3MB를 초과하기 쉽다.
실제 상황은 프로젝트가 시작될 때 모든 모듈이 불러와야 하는 것은 아니다.
그러나 이 모듈들은 모두 한데 묶여 있어 어떤 모듈이든 전체적으로 불러와야만 사용할 수 있다.
프로젝트가 브라우저에서 실행되면 많은 데이터와 대역폭을 낭비할 수 있다.
더욱 합리적인 방안은 바로'하도급','수요에 따라 불러오기'이다.

하도급: 하도급 결과를 일정한 규칙에 따라 여러 bundle에서 분리한다.

필요에 따라 불러오기: 응용의 운행 수요에 따라 필요에 따라 이 모듈을 불러옵니다.

이렇게 하면 프로젝트의 응답 속도와 운행 효율을 크게 높일 수 있다.

웹 패키지 통합 및 분리

앞에서 말한 웹 패키지는 코드에 흩어진 모듈을 합쳐서 운영 효율을 높이는 것이다.
지금 또 그것들을 분리할 것을 요구하는데, 이것은 물극필반의 결과이다.자원이 너무 크면 안 되고, 너무 깨져도 안 된다.
항목에서 모듈을 구분하는 과립도는 일반적으로 매우 가늘다.
많은 경우 하나의 모듈은 작은 도구 함수만 제공할 뿐 완전한 기능 단원을 형성하지 못한다.
흩어진 모듈을 합치지 않고 작은 기능을 실행할 때 많은 모듈을 불러옵니다.
현재 HTTP1.1 버전에는 다음과 같은 여러 가지 결함이 있습니다.

동역 병행 요청 제한: 같은 도메인에 여러 번 요청할 수 없음

요청마다 일정한 지연

매번 요청은 구체적인 내용을 전송하는 것 외에 추가 요청 헤더와 응답 헤더가 있다. 대량의 요청이 있을 때 이런 요청 헤더와 응답 헤더를 합치면 큰 낭비이다

위에서 말한 바와 같이 모듈 포장(합병)은 필요하다.
그러나 응용이 갈수록 커지면 천천히 변통하는 것을 배워야 한다.

Code Splitting

패키지 파일의 과도한 문제를 해결하기 위해 웹 패키지는 코드 패키지 기능을 지원하고 코드 분할이라고도 부른다.
그것은 포장된 모듈을 우리가 디자인한 규칙에 따라 서로 다른 버블에 포장함으로써 응용의 응답 속도를 높인다.
현재 웹팩에서'하도급'을 실현하는 방식은 주로 두 가지가 있다.

멀티 입구 패키지

비즈니스 구성에 따른 패키징 포털

여러 개의 입구를 동시에 포장하여 최종적으로 여러 개의 포장 결과를 출력

동적 가져오기

모듈을 필요에 따라 로드할 수 있도록 ESM의 동적 가져오기 기능import()을 사용합니다.

웹 패키지는 이 동적 가져오는 모듈을 버블에 단독으로 출력합니다.

다중 엔트리 패키지 Multi Entry

다중 입구 패키지는 일반적으로 전통적인 다중 페이지 응용 프로그램에 적용된다.
가장 일반적인 구분 규칙은 다음과 같습니다.

한 페이지는 포장 입구에 대응한다.

서로 다른 페이지의 공공 부분에 대해 하나의 공공 결과에서 단독으로 추출한다.

웹팩 구성 파일의 entry 속성 구성 유형:

문자열: 포털 파일

문자열 그룹: 여러 개의 입구 파일을 한데 묶으면 하나의 입구 패키지에 해당

객체: 여러 포털 파일을 각각 패키지

key: 입구의 이름

value: 포털에 대응하는 파일 경로

모든 패키지 입구는 하나의 독립된chunk를 형성합니다. 입구 이름은 이chunk의name (기본값main) 입니다.
다중 포털로 구성된 경우 내보낸 파일 이름도 수정해야 합니다.
[name] 자리 차지 문자를 사용하여 동적 출력 파일 이름을 사용하고 [name]는 최종적으로 입구의 이름, 즉 entry의 키로 바꿉니다.

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    index: './src/index.js',
    album: './src/album.js',
  },
  output: {
    //   [name]   ，       
    // [name]          ， entry key
    filename: '[name].bundle.js',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
    }),
    new HtmlWebpackPlugin({
      filename: 'album.html',
      template: './src/album.html',
    }),
  ],
}

이때 포장하면 두 개의 html와 두 개의 버블 파일을 출력하지만 html 파일에서 두 개의 버블 파일을 모두 인용한 것을 발견했다.
html-webpack-plugin 플러그인은 모든 패키지 결과를 주입하는 html을 자동으로 생성하기 때문이다.
출력된 html에 사용되는 bundle을 지정하려면 플러그인의 chunks 속성 설정을 사용할 수 있습니다.

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: './src/index.html',
  chunks: ['index'],
}),
new HtmlWebpackPlugin({
  filename: 'album.html',
  template: './src/album.html',
  chunks: ['album'],
}),

모든 포장 입구는 하나의 독립을 형성한다chunk.
플러그인의 chunks 속성은 chunk의 이름을 통해 어떤 것을 주입해야 하는지chunk를 지정한다.
다중 입구 패키지 결함:
입구에 따라 공공의 모듈이 있을 것이고 현재 다중 입구를 포장하는 방식에 따라 포장 결과에 따라 같은 모듈이 나타날 것이다.
예를 들어 위의 index.js와album.js는 모두 공공 모듈이나 css 모듈을 가져왔습니다.
솔루션:
이 공공 모듈을 공공 버블에 단독으로 추출하여 출력합니다.

공통 모듈 Split Chunks 추출

optimization 최적화 설정에서 splitchunks 기능을 켜서 공공 모듈 패키지를 추출할 수 있습니다.

optimization: {
  splitChunks: {
    // all                  bundle  
    chunks: 'all'
  }
}

포장하면 album~index.bundle.js 파일이 하나 더 생성됩니다.
그것이 보관하고 있는 것은 index입니다.js와album.js에서 공통된 모듈입니다.

동적 가져오기 Dynamic Imports

'필요에 따라 불러오기' 는 브라우저 응용 프로그램 개발에서 흔히 볼 수 있는 요구이다.
일반적으로 필요에 따라 데이터를 불러오는 것을 가리킨다.
여기의 필요에 따라 불러오는 것은 응용 실행 과정에서 어떤 모듈이 필요할 때 그 모듈을 불러오는 것을 가리킨다.
이 방식은 대역폭과 유량을 크게 절약할 수 있다.
웹 패키지는 모듈의 필요에 따라 불러오는 동적 가져오기를 지원합니다.
그리고 모든 동적 가져오는 모듈은 자동으로 분리됩니다. (하나의 단독chunk를 형성하여 단독bundle에서 추출됩니다.)
다중 입구 방식보다 동적 도입이 더욱 유연하다.
코드의 논리적 제어를 통해 모듈을 불러올 필요가 있는지, 언제 불러올 것인지를 제어할 수 있다.
지정된 모듈을 ESMimport() 방법으로 가져오면 promise가 반환됩니다.
예를 들면 다음과 같습니다.

//      /src/index.js
const render = (query) => {
  if (query == '#posts') {
    import('./posts/posts')
    	.then(({default: posts}) => {
      	console.log(posts())
	    })
  } else if (query == 'album') {
    import('./album/album')
    	.then(({default: album}) => {
      	console.log(album())
	    })
  }
}
// PS：  posts album              

패키지는 3개의 파일을 더 생성합니다. 파일 이름은 [number].bundle.js 입니다.
각각posts와album 모듈이고 다른 하나는 양자에서 추출한 공공 모듈이다.
이 세 개의 파일은 동적 가져오기, 자동 하도급으로 생성된 것이다.
전체 과정은 어떤 곳도 설정할 필요가 없습니다. 예를 들어optimization을 설정할 필요가 없습니다.splitchunks는 공공 모듈을 제공할 수 있습니다.
모듈은 ESM에서 구성원을 동적으로 가져오는 방식으로 가져오기만 하면 됩니다.
웹 패키지 내부에서 패키지를 자동으로 처리하고 필요에 따라 불러오며 공공 모듈을 추출합니다.
단일 페이지 응용 개발 프레임워크 (예: vue,react) 를 사용하면 프로젝트의 루트 맵 구성 요소를 동적 가져오는 방식으로 필요에 따라 불러올 수 있습니다.

마법 주석 Magic Comments

기본적으로 동적 가져오기를 통해 생성된 버블 파일의 이름은 시퀀스 번호입니다. 파일 이름은 [number].bundle.js 입니다.
웹 패키지 특유의 마법 주석을 통해 이름을 정의할 수 있습니다.
구체적인 사용은 import()의 매개 변수 위치(앞뒤 모두 가능)에 특정 형식의 줄 설명을 추가하는 것이다.

//   ：/*webpackChunkName:''*/
import(/* webpackChunkName: 'posts' */'./posts/posts').then(() => {})
import('./posts/posts'/* webpackChunkName: 'album' */).then(() => {})

파일을 생성하려면 다음과 같이 하십시오.

posts.bundle.js

album.bundle.js

album~posts.bundle.js가 제공하는 공공 모듈의 파일도 동기화 변화

만약 여러 모듈이 같은 ChunkName을 사용한다면, 그것들은 결국 한데 묶여 있을 것이다. 당연히 공공 모듈을 추출할 필요가 없고, 결국은 하나의 파일만 생성할 것이다.
이 특징을 빌려 상황에 따라 동적 가져오는 모듈이 출력하는 파일을 유연하게 조직할 수 있다.