웹팩 최적화 전략

小云云원래의: 2018-02-23 13:09:521240검색

단일 페이지 애플리케이션(vue, React)이나 패키지 플러그인을 구축할 때 JavaScript 패키징 도구인 webpack을 사용할 가능성이 높습니다.
그러나 프로젝트 코드가 증가함에 따라 webpack의 몇 가지 간단한 구성이 노출됩니다. 다양한 단점(패키징 시간이 길다, 코드가 크다)
자기 개발 과정과 웹팩 학습 과정을 바탕으로 문제 해결을 정리한 내용입니다.

패키징 시간이 길다

DllPlugin

많은 분들이 알고 계시는webpack.optimize .CommonsChunkPlugin이 플러그인은 공공 라이브러리를 추출하는 데 사용되지만, 이 플러그인은 공공 라이브러리의 반복적인 패키징 문제를 해결할 수 없습니다.
그러나 DllPlugin 이 플러그인은 이를 해결할 수 있습니다.
-in은 먼저 공용 라이브러리를 패키징합니다.
자체적인 독립적인 webpack 구성 파일이 있으며 구성 파일의 진입점은 패키징해야 하는 공용 라이브러리입니다.
패키징되면 공용 js 패키지와 manifest가 표시됩니다. .json.
manifest.json은 기본 구성 파일을 만드는 데 사용됩니다 DLLReferencePlugin은 관련 종속성에 매핑됩니다.

devtool cheap-module-eval-source-map

webpack을 사용하여 코드를 패키징하면 컴파일되기 때문에 디버깅이 어려워집니다.
그래서 webpack은 devtool에 API를 제공하여 소스 맵을 통해 오류의 정확한 위치를 찾습니다.
Choose devtool's cheap-module-eval-source-map 그 이유는 각 모듈이 eval()을 사용하여 연속 구성의 효율성을 크게 향상시키고 생성되는 열이 없기 때문입니다. 매핑은 구성 시간을 절약합니다(브라우저 엔진이 자동으로 열 정보를 제공합니다)

성능 최적화

스타일 분리 및 압축.

각 스크립트에서 스타일을 추출하려면 extract-text-webpack-plugin을 사용하세요.
allChunks: true를 설정하면 추출된 스타일이 하나의 파일로 병합됩니다.
사용 optimize- css-assets-webpack-plugin 스타일을 압축합니다.

스크립트 압축

사용 uglifyjs-webpack-plugin스크립트를 압축합니다.

js 성능 최적화

webpack의 각 모듈은 클로저 기능.
Usewebpack.optimize.ModuleConcatenationPlugin이 이를 연결합니다. 모듈이 클로저에 배치됩니다.
따라서 클로저 수를 줄입니다.

공개 코드 추출

DllPlugin 또는 webpack을 사용하세요. .optimize.CommonsChunkPlugin은 공개 코드를 추출하여 다른 파일로 패키징합니다.
반복 패키징을 피하여 패키지 크기를 줄입니다.

서버 사전 압축

서비스가 사전 압축을 켤 때.
The 파일 이름에 .gz로 끝나는 파일을 먼저 가져옵니다. 이 파일은 압축됩니다. 파일 크기는 더 작아집니다.
UsingCompressionWebpackPlugin은 해당 압축 파일을 생성합니다.