패키지 파일 크기가 너무 큰 웹팩 해결

웹팩 우리의 모든 파일이 당신이 작은 프로젝트입니다 그래서 경우에도 JS 파일로 패키지 된 파일은 매우 큰 패키지가 될 것입니다. 여기에 여러 가지 방법으로 최적화하는 방법의 측면에서.

불필요한 플러그인 제거

JS 파일과 같은 불필요한 플러그인, 많은 시간, 개발 및 생산 환경이 프로덕션 환경의 결과로, 같은 웹팩 프로필을 사용 웹팩에 포함 포장 된 시작 HotModuleReplacementPlugin, NoErrorsPlugin...에 상관없이이 시간을 어떻게 최적화 많은 영향을 미치지 않았다. 패키지 한 후 파일이 매우 큰 경우에 따라서, 다음 검사 플러그인을 포함되지 않습니다.

타사 라이브러리의 추출

핵심 코드처럼이 라이브러리 627킬로바이트있을 것이다 반응과 함께 패키지에있는 우리의 소스 코드, 그래서 볼륨은 확실히 좋은 것입니다. 웹팩을 설정할 수 있습니다

{ 
  항목 { 
   번들 : '애플리케이션' 
    벤더 : '반응' ] 
  } 

  플러그인 { 
    새로운 webpack.optimize.CommonsChunkPlugin ( "벤더 'vendor.js' ) 
  } 
}

 

이 패키지는 더 될 것입니다 후 vendor.js파일을하기 전에 우리 자신의 코드를 도입 한 후, 당신은이 문서의 도입에 있습니다. 예를 들어,에서index.html

 <script src="/build/vendor.js"></script> <script src="/build/bundle.js"></script> 

본 실시 예 이외에도, 타사 라이브러리는 또한 다음과 같은 구성, 외부 파일을 참조에 의해 도입 될 수있다

{
  externals: {
     'react': 'React' } } 

externals주요 대상이다 require예 때 사용할 require('react')객체의 값을 표현 전역에서 개체에 액세스하는 방법이다있다 window.React. 이 시간은 index.html다음과 같이된다

<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script> <script src="/build/bundle.js"></script> 

물론, 개인적으로 첫 번째 방법을 추천합니다.

현재 권장되는 DLL의 타사 라이브러리 방식의 압축을 풉니 다.

코드 압축

웹팩이 플러그인 압축되어 UglifyJsPlugin 만 구성 파일에 도입 될 필요가있다.

{ 
  플러그인 : 
    새로운 webpack.optimize.UglifyJsPlugin ({ 
      압축 { 
        경고 : 거짓 
      } 
    }) 
  ] 
}

 

이 플러그인을 추가 한 후, 컴파일 속도가 활성화 된 경우에만 프로덕션 환경에서 일반적으로 느린 크게이다.

또한, 서버가 GZIP 압축을 설정할 수 있습니다, 최적화가 더 효과적입니다.

코드 분할

코드를 분할 무엇입니까? 우리는 웹 페이지의 모든 JS 코드를 넣어 일반 부하가 다운로드 것을 알고있다. 그러나 웹 앱, 더 많은 우리가 원하는 부분적로드 클릭하지는 UI의 현재 코드를로드하는 것입니다.

외모는 매우 골칫거리 좋아하지만 웹팩에 의해 코드 분할 및 맞춤 라우터 반응 을 쉽게 달성 될 수있다. 구체적인 예는 공식이 대표적인 라우터 반응을 보일 수 있습니다 거대한 애플 리케이션 . 그러나 이것은 여전히 다음 구덩이 전에 계단 구성에 말하고 있었다.

code split그것은됩니다 에 의해 지원되지 ES6의 모듈 시스템, 그래서 오기 특히 수출, 시간의 수출에주의하십시오. 이 CommomJs 가져 오기 또는 AMD 여부를이 시점에서, ES6 방법을 사용할 때 구성 요소 내보내는 경우, 그것은뿐만 아니라 오류없이 실패 할 것이다!

물론, 내가 구덩이에 단계 것뿐만 아니라 난 그냥 NodeJS를 사용하기 때문에, 그리고 항목은 ES6 스타일을 사용하는 것입니다. 이 외에도, 우리는 웹팩 프로파일 생산 환경에주의를 기울여야한다 또 다른 한가지는, 추가publicPath

출력 { 
    경로 : XXX, 
    publicPath : YYY, 
    파일명 : "bundle.js ' 
}

 

그렇지 않으면, 웹팩로드 청크 경로는 잘못된 것입니다.

캐시 설정

:이 항목을 시작하기 전에 문서의 신에서 볼 수 큰 회사가 어떻게 개발 및 배포 프런트 엔드 코드 .

정적 파일은 첫 번째 인수 한 후, 문서를 변경하지 않은 경우, 브라우저 캐시 파일은 직접적으로 읽을 수 있습니다. 캐시가 너무 오래 설정되어있는 경우는 어떻게 업데이트 할 파일이 그것을 어떻게? 파일 이름으로 MD5 파일 내용에 아 좋은 솔루션입니다. 웹팩으로 달성하는 방법을 찾아야한다

출력 { 
    경로 : XXX, 
    publicPath : YYY, 
    파일명 : "[이름] - [chunkhash : 6]의 .js ' 
}

 

패키지 파일 이름은 해시 값에 추가 한 후

CONST 들러 = 웹팩 (구성) 

bundler.run ((ERR, 통계) => { 
  자산하자 = stats.toJson () 자산. 
  하게 이름 

  대 (I = 0하자 나는 <assets.length 나는을 ++ ) {
     경우 (자산 [I] .name.startsWith ( '주' )) { 
      이름 = 자산 [I] .name을
       체류 
    } 
  } 

  (config.buildTemplatePath (ERR, 통계) fs.stat => {
     경우 (ERR) { 
      fs.mkdirSync ( config.buildTemplatePath) 
    } 

    writeTemplate (이름) 
  }) 
})

 

웹팩 수동으로 API 호출에 의해, 패키지의 파일 이름을 얻기 writeTemplate업데이트 html 코드. 전체 코드 Mengchuo gitst .

이 방법은, 우리는 캐시 파일이 매우 긴 설정 넣을 수 및 업데이트 문제에 대해 걱정하지 마십시오.

웹팩 DLL

서버는 GZIP가 켜져
흔들어 지원 트리를 webpack2. 당신은 코드가 흔들리는 나무에 의해 참조되지 삭제할 수 있습니다.
궁극적 인 해결책은 서버 측 렌더링 지원하는 것입니다
clinyong 저자 :
링크 : HTTPS : //www.jianshu.com/p/a64735eb0e2b
출처 : 제인 책은
저자에 의해 저작권이됩니다. 상업 무단 전재 공인 저자에 문의하시기 바랍니다, 소스가 표시 비상업적 무단 전재하시기 바랍니다.