처음 두 기사는 주로 웹팩 구성을 설명하지만, 점점 더 많은 프로젝트로, 속도를 구축하는 볼륨도 증가하고있다 JS 밖으로 건설, 느린 속도가 느려질 수 있습니다, 당신은 웹팩 필요 구성 최적화.
다스 최적화 방법 알아 본 논문 세트는, 우리는 자신의 프로젝트를 결합하여 최적화 할 수있는 적절한 방법을 선택할 수 있습니다. 소스 플러그 - 인 웹팩 나는 주로 주로 웹팩 공식 문서 및 프로젝트 관행의 조합, 그리고 잘못된 위치에 텍스트가있는 경우,이 문서의 출력을 확인 후 많은 시간을 보냈다, 그것을 읽어 보지 않았, 코멘트 영역에 저를 수정하시기 바랍니다.
: 급속한 변화 프런트 엔드 기술을 감안할 때, 웹팩의 버전 번호에 따라이 문서에 의존
├── [email protected]
└── [email protected]은
참조를 위해 (이 글을 쓰는 시점을 사용)이 문서에 주소를 해당 항목에서 코드를 복사 : github.com/YvetteLau/w ...
정량화가
때때로, 우리는 최적화의 생각은 정량적 지표 전과 비교 볼 수 있습니다 후가있는 경우, 다음, 부정적인를 최적화하는 것입니다, 그것은 더 좋은 것은 없을 것이다.
속도 측정 값 - 웹팩 - 플러그인 사용 후 구성된 경우,이 정보는 다음과 유사 할 것이다 플러그인 및 각각의 측정 시간을 소비 로더 :
정보 전과 비교 한 후, 최적의 결과를 확인합니다.
: 속도 측정 값 - 웹팩 - 플러그인을 사용하는 간단한이를 직접 구성 웹팩 감싸도록 사용될 수있다
//webpack.config.js
; CONST = SpeedMeasurePlugin 요구] ( "속도 측정-웹팩 - 플러그인")
CONST는 = 새 새로운 SMP SpeedMeasurePlugin을 ();
구성 CONST = {
// ... 웹팩 배치
}
module.exports = smp.wrap (구성);
복사 코드 1.exclude 포함 /
우리가 번역 몇 가지 문서를 제외하면, 구성이 포함되도록하기 위해 할 수있는 것이다. 이름에서 알 수 있듯이, 제외 할 특정 파일을 제외 포함하도록 지정된 파일을 포함한다.
포함 포함 및 제외 사용을 포함에, 선호 제외되는 피하려고하는 배열의 절대 경로를 사용하는 것보다 더 높은 우선 순위를 제외합니다.
//webpack.config.js
CONST = 경로 요구 ( '패스');
module.exports = {
// ...
Module1의 {
규칙 [
{
테스트 : /.js[x]?$/,
용도 : [ 'babel- 로더 ']
을 포함한다 : path.resolve를 (__ dirname은,'SRC에 ')]
}
]
}
}
코드도 나는 결과를 포함하는 상기 비교의 구성 및 구성을 포함하는 구성되지 않은 복사
-
캐시 로더
성능 오버 헤드 로더, 결과 캐시 디스크의 큰 숫자 앞에 추가 캐시 로더. node_modueles / .cache / 캐시 로더 디렉토리 기본 저장합니다.
첫 번째 설치가 따라 달라
NPM 캐시 로더 -D 설치
코드 캐시 로더 설정은 매우 간단 복사, 그것은 다른 로더 전에 배치 할 수 있습니다. 다음과 같이 웹팩 수정 된 구성은 다음과 같습니다
module.exports = {
// ...모듈 : {
내가 준 있도록 // 내 프로젝트는 바벨 로더는 구성, 오래 걸립니다cache-loader
[: 규칙을
{
테스트 : /.jsx?$/,
사용 : [ '캐시 로더', '바벨 - 로더 ']
}
]
}
}
당신이 나 같은 경우는, 캐시 로더를 사용할 수 없습니다 바벨 로더 옵션의 경우 cacheDirectory를 증가 만 바벨 로더 구성 캐시에가는 코드를 복사합니다.
경우 cacheDirectory : 기본값은 false입니다. 때 세트, 지정된 디렉토리는 로더의 결과를 캐시하는 데 사용됩니다. 웹팩은 건설 후 발생할 수있는 각각의 실행을 방지하기 위해 캐시를 읽으려고합니다, 바벨 고성능 소비의 과정을 재 컴파일. node_modules / .cache / 바벨 로더 : 또는 널 세트는 true의 경우, 기본 캐시 디렉토리를 사용 . 열기 바벨 로더 캐시 구성 및 캐시 로더, 나는 다음 시간이 매우 가까운 건물입니다 비교했다.
3.happypack
많은 수의 파일로 인해 파일의 수가 증가는, 웹팩 건물 느린 심각한 문제가 될 것입니다, 특히, 구문 분석 및 프로세스, 파일 읽기 및 쓰기 및 연산 집약적 인 작업을 구축 할 필요가있다. 문서 활용 능력 및 컴퓨팅 작업이 웹팩에게 빌드 속도를 업그레이드하기 위해 여러 작업, 멀티 코어 CPU의 파워 플레이 컴퓨터를 처리하기 위해 같은 시간을 허용 할 수없는, 피할 수없는?
HappyPack는 웹팩가 자식 프로세스가 처리 된 실행 한 후 기본 프로세스에 결과를 전송하는 동시에 여러 자식 프로세스에 작업을 무너 뜨리는 그것을 할 수 있습니다.
happypack 설치 우선 필요 :
NPM은 -D가 happypack 설치
구성 파일 수정하는 코드 복사 :
(가) ( 'happypack')를 필요로 CONST = Happypack을,
module.exports = {
// ...
Module1의 : {
규칙을 : [
{
시험 : /.js[x]?구문 분석 오류 Katex은 ... [path.resolve (__dirname, 'SRC에'... : 예상 (90)의 위치에 그룹 '_'후 /
사용 : '? Happypack / 로더 ID = CSS',
은 다음과 같습니다 : [
path.resolve (__이 dirname을 ' SRC에 ')
path.resolve (__ dirname은', ','DIST ') 부트 스트랩에 node_modules' '
]
}
]
}
플러그인 :
새로운 새 Happypack ({
ID, 「ID에 대응 JS', // 및 규칙 = JS
이 구성 로더 이전 // 규칙
용도 : [ '바벨 로더' ] //이 있어야 배열
})
새로운 새 Happypack ({
ID 'CSS', //와에 대응하는 규칙 ID = CSS의
사용 : [ '스타일 로더', 'CSS-로더', 'postcss-로더']
})
]
}
CPU 코어의 수에 코드 happypack 기본 복사 - 1 개 과정, 물론, 우리는 스레드가 happypack에 전달할 수 있습니다.
설명 : Happypack에서 postcss 로더 구성이 프로젝트의 postcss.config.js를 작성해야합니다 때.
//postcss.config.js
module.exports = {
플러그인 : [
요구] ( 'autoprefixer') ()
]
}
그렇지 않으면 오류가 발생합니다 코드 복사 : 오류 : PostCSS 구성이 발견
, 또한 프로젝트가 매우 복잡하지 않습니다 할당 및 관리 프로세스도 천천히, 시간을 소요하고 효과적으로 속도의 건설을 향상 할 수 없기 때문에, 구성 happypack 할 필요가 없습니다.
4.thread 로더
Happypack, 우리는 또한 스레드 로더, 다른 로더 앞에 배치 스레드 로더를 사용할 수 있습니다 사용하는 것 외에도 후 로더 뒤에 위치 로더는 별도의 작업자 풀 가동 될 것입니다.
작업자 풀에서 실행 로더 (작업자 풀) 제한됩니다. 예를 들면 :
로더는 새 파일을 만들 수 없습니다.
로더는 (플러그인을 통해) 사용자 정의 로더 API를 사용할 수 없습니다.
로더는 세트 웹팩 할 수있는 옵션을 얻을 수 없습니다.
먼저 설치 따라 달라
NPM이 스레드 -D-로더 설치
: 구성 수정 코드를 복사
module.exports을 = {
Module1의 : {
//이-로더 I 스레드로 구성되어 있습니다 그래서이 프로젝트는, 바벨 - 로더, 오래 걸립니다
규칙 :
{
테스트는? /.jsx Katex는 구문 분석 오류 : 예상 'EOF', GOT '}'87 위치 : ... ']}] ... /, / 순간을 $ /)
]
}
우리가 필요로하는 경우, 사용시 코드를 복사 특정 언어, 우리가 수동으로 언어 팩에 필요한 중국어 언어 팩을 도입, 예를 들어 소개 :
가져 오기 '순간'순간에서,
가져 오기 '순간 / 로케일 / ZH-CN'; // 수동으로 도입
코드 만하는 index.js 도입 복사 순간 263킬로바이트의 포장 bundle.js 크기 중 구성 IgnorePlugin 별도로 도입 경우 모멘트 / 로케일 / 55킬로바이트에서 zh-CN의 패킷 크기 아웃 지어진.
10.externals
우리가 어떤 JS는 CDN에 저장된 파일 이동 된 index.html에 의해, (웹팩 볼륨을 JS 포장 감소)
= {module.exports의
엔트리 {
반응 : '반응', 'DOM-반응']
}
MODE '생산'
출력 {
파일명 : '. [이름] .DLL [해시 :. 6]의 .js'
경로 : path.resolve (__ dirname이, 'DIST', 'DLL'),
도서관 다음 // 사용하여 외부로 노출 '[이름] _DLL'
// libraryTarget 기본 VAR입니다, 컨텐츠가 노출되는 방법을 지정
,}
플러그인 : [
새로운 새를 webpack.DllPlugin ({
// 이름과 동일한 라이브러리
이름 '[이름] _DLL'
경로 : path.resolve (__ dirname이 'DIST', 'DLL', 'manifest.json을') 경로를 생성 //manifest.json
})
]
}
스크립트 package.json의 코드 증가의 복사 :
{
"스크립트": {
"DEV": "개발 NODE_ENV = 웹팩-DEV-서버",
"빌드": "생산 웹팩 NODE_ENV =",
"빌드 : DLL": "웹팩 --config webpack.config.dll.js은"
}
}
코드 실행 NPM 실행 빌드를 복사 : 모든, 당신은 별도의 디렉토리 아래에 위치 동적 링크 라이브러리 DLL의 이유로 dist 디렉토리를 볼 수 있습니다 주로 순서 CleanWebpackPlugin 더욱 쉽고 동적 링크 라이브러리를 걸러 사용한다.
DIST
└── DLL
├── manifest.json을
└── react.dll.9dcd9d.js
DLLReferencePlugin가 종속성에 매핑시키기위한 코드의 manifest.json을 복사합니다.
웹팩 주요 구성 파일을 수정 : webpack.config.js 구성 :
//webpack.config.js
CONST = 웹팩 요구] ( '웹팩');
CONST = 경로는 ( '패스') 요구;
module.exports = {
// ...
devserver {
ContentBase : path.resolve (__ dirname이 'DIST')
}
플러그인 :
새로운 새 webpack.DllReferencePlugin ({
매니페스트 : path.resolve (__ dirname이 'DIST', 'DLL', 'manifest.json을')
})
새로운 새 CleanWebpackPlugin ({
cleanOnceBeforeBuildPatterns : ' '! DLL / / * ','! DLL ' '] // dll을 디렉토리를 삭제하지 않습니다
})
// ...
]
}
가 사용하는 빌드 건물 실행 NPM 코드를 복사, 당신은 크게 감소 볼륨 bundle.js 볼 수 있습니다.
검토 공공 / index.html을 파일에있는 소개 react.dll.js
코드를 복사
빌드 속도
패키지 볼륨
12 이탈 공통 코드
다중 페이지 응용 프로그램에 대한 이탈의 공통 코드는 페이지 소개합니다 몇 가지 일반적인 모듈의 복수, 그것은 별도로 포장이 공통 모듈에서 철수 할 수있는 경우. 공통 코드는 피하고 중복 다운로드 캐시까지 한 번에 다운로드해야합니다.
단독 및 다중 페이지 공통 코드는 단일 페이지 응용 프로그램의 구성에는 차이가 없어야에서 optimization.splitChunks 구성된다.
//webpack.config.js
module.exports = {
최적화 {
splitChunks {// 코드 블록 세그멘테이션
cacheGroups {
벤더 {
// 타사 따라
우선 순위 1, // 설정된 우선 순위가 제 3 모듈에 분리
이름 : '벤더,
테스트 : /를 node_modules /
청크'초기 '
최소 매개 변수 : 0
minChunks 1 // 적어도 1 회 도입
}
// 캐시 그룹
공통 {
// 공통 모듈
청크'초기 ' ,
이름은 '공통',
최소 매개 변수 : 100, // 크기가 100 바이트를 초과
minChunks : 3 // 최소 세 번 소개
}
}
}
}
}
코드를도 단일 페이지 응용 프로그램을 복사, 당신은 예를 들어, 포장 밖으로 bundle.js 너무 큰, 우리는 동적 링크 라이브러리로 포장 일부는 다음 타사 의존의 나머지 부분을 찢어에 의존 할 수 있습니다,이 같은 설정을 사용할 수 있습니다. 이것은 효과적으로 bundle.js의 볼륨의 크기를 줄일 수 있습니다. 공공 모듈 물론, 당신은 내 프로젝트 소스 코드 이하, 그래서 구성이 없기 때문에, 여기에 비즈니스 코드를 추출 계속할 수 있습니다.
runtimeChunk
. runtimeChunk 역할 splitChunk를 구성 할 때 main.js 덩어리가 꺼내에서, 매핑의 목록을 포함하는 구성 runtimeChunk 기억하는 것입니다
module.exports를 = {
// ...
최적화 : {
runtimeChunk : {
이름 : '매니페스트'
}
}
}
파일 복사 코드 최종 구조는 manifest.js 밖으로 생성됩니다.
더 최적화 웹팩-번들 분석기로
웹팩 빌드에게 최적화 된 시간을하고, 공급 업체는 더 1M 이상, 반응 및 반응-DOM은 DLL들로 소포로하고있다 이길.
따라서 더 많은 양의 패키지를 살펴 웹팩-번들 분석기에 대한 필요성.
먼저 설치 따라 다릅니다
NPM-웹팩하여 번들 -D-분석기 설치
우리가 구성, 수정, 코드도 매우 간단 복사 :
//webpack.config.prod.js
CONST = BundleAnalyzerPlugin을 ( '번들-웹팩 분석기') BundleAnalyzerPlugin을 필요로한다. ;
CONST = (가) 필요 병합 ( '웹팩 병합');
하며이 baseWebpackConfig = CONST ( './ webpack.config.base')이 필요합니다
({이 baseWebpackConfig, module.exports =이 병합
// ...
: [플러그인
// ...
BundleAnalyzerPlugin () 새로운 새롭고
]이
})
코드 NPM 실행 빌드 구조를 복사 한 것 기본적으로 : http://127.0.0.1:8888/, 각 패킷의 양을 볼 수있다 :
또한 분할 벤더 (스플릿 사용 splitChunks) 4 개로 분할 벤더.
= {module.exports의
최적화 : {
concatenateModules : false로,
splitChunks : {// 코드 블록 분할
maxInitialRequests :. 6, // 기본 5
cacheGroups : {
업체 : {
// 타사 따라
우선 순위 :. 1,
이름 : '공급 업체'
테스트 : /, /를 node_modules
청크는 '최초',
최소 매개 변수 : (100),
minChunks가 : 여러 번 반복 도입하는 1 //.
},
'웹 로티': {
이름 : "로티 - 웹", // 별도로 반응-로티을 풀고
우선 순위 : 5, // 체중보다 커야합니다 vendor
테스트 : / [/]를 node_modules는 [/] 웹 로티는 [/] /,
덩어리의 위치 : '초기',
최소 매개 변수 : (100),
minChunks이 :. 여러 번 반복 도입하는 1 //
} ,
// ...
}
}
}
}
코드 재건 복사, 결과는 다음과 같습니다 :
13.webpack 최적화 자신의
나무 흔드는
당신이 수입 구문 ES6을 사용하는 경우를 다음 프로덕션 환경에서, 자동으로 코드를 사용하지 않고 제거됩니다.
//math.js이
있는 추가에서 const = (A, B) => {
CONSOLE.LOG ( 'AAAAAA')은
A + B를 반환;
}
CONST 마이너스 = (a, b) => {
CONSOLE.LOG ( 'bbbbbb')
, (B) -를 반환
}
{내보내기
추가,
빼기
}
코드 //index.js 복사
; './math'에서 가져 오기 {추가, 마이너스}
추가 (2,3)
에 내장 된 최종 사본 코드를 뺀 기능이 그것으로 포장되지 않습니다.
범위 호스팅 범위를 강화하기 위해
변수의 증가를, 당신은 변수 선언의 수를 줄일 수 있습니다. 프로덕션 환경에서는 기본적으로 사용 가능.
또한, 우리는 그렇지 않으면 오류가 발생하지, 사용할 수없는 테스트, 속도 측정 - 웹팩 - 플러그인과 HotModuleReplacementPlugin의 시간을주의 :
바벨 최적화 구성
은 바벨에 익숙하지 않은 경우, 당신은이 문서를 읽을 수 있습니다 : Babel7 지식을 놓칠 수 없습니다.
배치되어 있지 않은 경우 @ 바벨 / 플러그인 - 변환 - 런타임 , 바벨 유사한 _createClass에게 공공 방법을 달성하기 위해 작은 도우미 함수를 사용한다. 기본적으로 주입한다 (를 주입은) 그것은 각 파일에 필요합니다. 그러나,이 결과는 더 큰 크기로 구성된 JS 아웃이었다.
우리가 사용할 수 있도록 우리는 또한, 각 보조 기능의 js를 주입 할 필요가 없습니다 @ 바벨 / 플러그인 - 변환 - 실행을 , @ 바벨 / 플러그인 - 변환 - 런타임 바벨은 코드 크기 저장하는 재사용 가능한 사출 도우미 플러그인.
따라서, 우리는 증가 할 수 @ 바벨 플러그인 - 변환 - 런타임 구성 /에서 .babelrc있다.
{
는 "사전 설정"[]
"플러그인"[
[
"@ 바벨 / 플러그인 - 변형 - 런타임"
]
]
}
당신이 최적화 할 수있는 더 좋은 방법이 있다면 내가 어떤 최적화 날짜에 사용할 것입니다 위의 코드를 복사 오신 것을 환영합니다 코멘트 섹션의 의견, 감사에 대한 읽기.
