패키지 크기를 줄이는 가능한 방법

원본 이미지 소스: https://images.ctfassets.net/nj2caiz7hkjw/3VoFdDTP5SowwESKIOAgm/a111ddd784928b61045c8e811e1769be/webpack.png
webpack’s official website에 따르면 웹팩은 현대 자바스크립트 응용 프로그램의 정적 모듈 귀속기이다.웹 팩이 응용 프로그램을 처리할 때, 프로젝트에 필요한 모든 모듈을 비추고, 하나 이상의 패키지를 생성합니다.
웹팩은 하나의 단독 작업 실행 프로그램과 묶을 수 있다.그러나 지역사회에서 개발한 패키지 플러그인 때문에bundler와taskrunner 간의 경계가 모호해졌다.때때로 이 플러그인들은 웹 패키지 밖에서 일반적으로 이루어지는 작업을 수행하는 데 사용됩니다. 예를 들어 생성 디렉터리를 정리하거나 생성을 배치하는 것입니다.
이것은 주로 JavaScript의 모듈 귀속기이지만, HTML, CSS, 심지어 이미지와 같은 모든 전단 자산을 변환하는 것을 가르칠 수 있다.이것은 응용 프로그램이 보내는 HTTP 요청의 수량을 더욱 잘 제어하고 이 자산의 다른 스타일 (예를 들어 파그, Sass, ES8) 을 사용할 수 있도록 합니다.웹팩은 또한 npm 패키지를 쉽게 사용할 수 있습니다.
웹팩은 좋은javascript 응용 프로그램 정적 귀속기이지만, 웹팩 귀속기의 크기가 증가하면 혼란스러워질 수 있으며, 자바스크립트 프로그램의 불러오는 시간을 크게 낮출 수 있습니다.
다음은 웹 패키지의 크기를 줄이는 좋은 방법입니다.

종속 관계도 조립 범위

범위 향상은 더욱 스마트한 방식으로 모듈을 번들에 추가합니다.
범위 승급은 무엇을 할 수 있습니까?
● 브라우저에서 JavaScript 실행 속도 향상
● 번들 크기를 줄일 수 있습니다.
나 어떻게 해야 돼?
웹 페이지의 플러그인 부분에 이 줄을 추가합니다.구성js 파일:

​​ webpack.optimize.ModuleConcatenationPlugin()

그러나 웹 팩 3 이상의 버전이 필요합니다.

생산에서 WEBPACK 4 사용

이 점은 매우 중요하다. 왜냐하면 생산 중에 웹 팩4를 사용하면 모든 불필요한 공백, 새 줄 등을 자동으로 삭제할 수 있기 때문이다. 또한 일부 소프트웨어 패키지에는 디버깅 코드가 포함되지 않는다고 알려줄 수 있다.
나 어떻게 해야 돼?
이렇게 생산 패키지 만들기

webpack -p --mode=production

그것이 하는 일:
● UglifyJS를 사용하여 축소
● NODE\u ENV를 프로덕션으로 설정

LODASH-WEBPACK-PLUGIN 사용

자바스크립트 프로젝트에서lodash를 사용하려면lodash 패키지 플러그인을 보십시오.사용하지 않는lodash 기능을 삭제했습니다.이것은 묶음의 크기를 크게 줄일 것이다.
나 어떻게 해야 돼?
명령을 사용하여 npm에서 의존 항목 설치

npm install lodash-webpack-plugin -save--dev

웹 페이지 맨 위에 있는 모듈을 요구합니다.구성js:

​​ LodashModuleReplacementPlugin = ​require​(​’lodash-webpack-plugin’​);

당신의 웹 페이지에 이 줄을 추가합니다.구성플러그인 부분의 js

new LodashModuleReplacementPlugin

번들 분석기 도구 사용

웹팩에서 생성된 패키지는 인간이 읽을 수 없습니다.그러나 빔 분석기가 있어 사람들은 상호작용식 트리 모양도에서 빔 파일을 시각적으로 출력할 수 있다.
나 어떻게 해야 돼?
많은 웹 패키지 분석 도구가 있다.내가 보기에 이 두 개가 가장 좋다.
●
● https://github.com/th0r/webpack-bundle-analyzer

https://github.com/danvk/source-map-explorer 나무가 흔들리다

트리 떨림은 가방에서 죽은 코드를 삭제하는 과정입니다.죽은 코드는 어떤 위치도 가져오지 않고 내보내는 코드입니다.
나 어떻게 해야 돼?
1) ES6 모듈 구문 사용
ES6 모듈을 사용하고 가능한 한 모듈 이름으로 가져오십시오.이렇게

import { connect } ​from ”react-redux”​; ​​ ​

대신:

​​ import reactRedux ​from ”react-redux”​; ​​ ​

2) 업데이트.바벨.철근 콘크리트
모듈 추가:false에서 babel로 설정 (일반적으로.​ 바벨.철근 콘크리트​).
es2015 사전 설정을 사용하는 경우 다음과 같이 해야 합니다.

presets: [[​”es2015"​, { ​”modules”​: ​false​ }] ]

만약 babel preset env를 사용한다면 다음과 같이 해야 합니다.

presets: [[​”env”​, { ​”modules”​: ​false​ }] ]

3) 웹 팩 2 이상의 버전을 사용하고 있는지 확인

코드 분할

웹팩을 사용하면 패키지를 여러 개의 작은 패키지로 나누어 페이지마다 필요한 패키지만 불러올 수 있습니다.패키지를 비동기적으로 불러올 수도 있습니다!
예를 들어 모드가 있다면, 사용자가 모드를 열 단추를 눌렀을 때만 모드의 코드를 불러와서 코드 분할을 실행할 수 있습니다.초기 페이지에서 불러올 때 모드 코드를 불러오지 않았기 때문에 불러오는 시간이 증가합니다.
나 어떻게 해야 돼?
코드 버스트 작업 방법에 대한 자세한 내용:
●

코드 분할 공구서류

●
● https://survivejs.com/webpack/what-is-webpack/
● https://www.sitepoint.com/beginners-guide-webpack-module-bundling/
최초 발표https://webpack.js.org/concepts.