18. 웹팩 최적화 (3)

IgnorePlugin

웹팩 내장 플러그인

이 플러그인의 역할은 제3자 패키지 지정 디렉터리를 무시하고 이 지정 디렉터리가 포장되지 않도록 하는 것이다

예:
moment 패키지
예를 들어 우리는 모멘트라는 제3자 의존 라이브러리를 사용해야 한다. 이 라이브러리는 주로 시간에 대한 포맷을 하고 여러 국가의 언어를 지원한다.
질문
다음 API 중 하나의 코드 값이 도입된 경우

import moment from 'moment'

//    
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);

이렇게 출력된 것이 바로 중국어의 시간입니다. 왜냐하면 이 API를 사용할 때 앞에 언어 형식 모멘트가 설정되어 있기 때문입니다.locale는 중국어zh-cn입니다.
하지만 중국어로 언어를 설정했지만 포장할 때 모든 언어를 포장합니다.이렇게 하면 가방이 매우 크고 포장 속도도 느려진다
따라서 쓸모없는 의존 목록을 적게 싸서 넣는 것이 좋다
모멘트의 포함locale/'이 필드 경로의 파일 디렉터리는 각국 언어의 디렉터리입니다. 예를 들어'./locale/zh-cn은 중국어 언어입니다.
IgnorePlugin 사용

이 플러그인은 지정한 디렉터리를 무시하고 패키지를 빠르게 하고 파일을 작게 할 수 있습니다

사용 방법:

let Webpack = require('webpack');
plugins:[
	new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment    ，     ./locale/     ，    ，      
]

문제 존재와 해결

우리는 위의 방법에 따라 포함을 소홀히 했지만./locale/'이 필드 경로의 파일 디렉터리입니다. 그러나 사용할 때 중국어 언어를 표시할 수 없기 때문에 이 때 중국어 언어의 디렉터리를 수동으로 도입할 수 있습니다.

import moment from 'moment'

//    

//           
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

let r = moment().endOf('day').fromNow();
console.log(r);

그럼 OK.중국어를 표시할 수 있을 뿐만 아니라, 불필요한 언어 패키지도 포장을 소홀히 했다

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

18. 웹팩 최적화 (3) - IgnorePlugin

IgnorePlugin 웹팩 내장 플러그인 이 플러그인의 역할은 제3자 패키지 지정 디렉터리를 무시하고 이 지정 디렉터리가 포장되지 않도록 하는 것이다 예: moment 패키지 예를 들어 우리는 모멘트라는 제3자 의...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

18. 웹팩 최적화 (3) - IgnorePlugin

좋은 웹페이지 즐겨찾기