웹 팩 포장 후의 파일 이 너무 큰 해결 방법 에 대하 여 말씀 드 리 겠 습 니 다.

예전 에는 create-react-app 라 는 비 계 를 사용 하여 react 개발 을 해 왔 는데,그 다음 에는 사용자 정의 설정 으로 인해 웹 팩 으로 자신의 비 계 를 만 들 었 습 니 다.그런데 웹 팩 으로 포장 한 결과 나 니?왜 이렇게 서류 가 커 요?그래서 웹 팩 을 포장 한 후 파일 이 너무 큰 상황 을 어떻게 처리 하 는 지 연구 하여 간단하게 기록 했다.
우선 전역 변수 설정
우선,지정 한 환경 을 통 해 웹 팩 에 게 우리 가 현재 production 환경 에 있 음 을 알려 주 고 production 방식 에 따라 포장 해 야 합 니 다.

//    ， process.env.NODE_ENV   library  
 new Webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('production'),
 }),

devtool 의 source-map 최적화.
dev-tool 은 debug 의 능력 을 향상 시 키 기 위해 여러 가지 옵션 을 제공 합 니 다.우리 가 잘 아 는 것 은 source-map,inline-source-map,cheap-source-map 등 이 있 습 니 다.상세 한 용법 은Devtool 공식 문서,Devtool 설정 비교,webpack sourcemap 옵션 의 다양한 모델 에 대한 설명 을 참고 할 수 있 습 니 다.source-map 는 개발 단계 에서 확실히 사용 하기 좋 고 디 버 깅 하기에 편리 하지만 생산 환경 에서 배치 할 필요 가 없습니다.prod 환경 에서 source-map 를 닫 는 것 을 권장 합 니 다.
css 파일 박리,단독 포장
웹 팩 플러그 인 extract-text-webpack-plugin 을 설치 합 니 다.npm install extract-text-webpack-plugin --save-dev 。 사용 방법:

plugins:[
 new ExtractTextPlugin('static/css/styles.[contenthash].css'),
]

콘 텐 츠 hash 를 사 용 했 습 니 다.웹 팩 은 내용 에 따라 hash 값 을 생 성 합 니 다.
UglifyJSplugin 압축 을 사용 합 니 다.
UglifyJSplugin 을 통 해 우리 의*.js 파일 을 압축 할 수 있 습 니 다.설치 방법:npm install uglifyjs-webpack-plugin--save-dev.용법

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
 plugins: [
   new UglifyJSPlugin({
      parallel: 4,
      uglifyOptions: {
        output: {
          comments: false,
          beautify: false,
        },
        compress: {
          warnings: false
        },
      },
      cache: true,
    }),
 ]
}

공공 의존 추출
Commons ChunkPlugin 플러그 인 을 사용 하여 여러 js 파일 을 추출 하여 독립 된 파일 을 만 듭 니 다.이 파일 은 공용 모듈 을 포함 하고 있 습 니 다.류 와 같은 뷰 어 는 처음에 한 번 만 불 러 오고 캐 시 를 해서 나중에 사용 할 수 있 습 니 다.새 인터페이스 에 접근 할 때마다 더 큰 파일 을 불 러 오지 않 아 도 됩 니 다.

entry:{
 app:'./entry',
 vendor:['react','other-lib'],
 },
 plugins:[
 new Webpack.optimize.CommonsChunkPlugin({
   name: 'vendor',
 }),
 ]

gzip 압축 열기
압축-webpack-plugin 플러그 인 을 사용 하여 압축 합 니 다.설치:npm install compression-webpack-plugin--save-dev.https://webpack.github.io/docs/configuration.html#devtool사용:

const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
 asset: '[path].gz[query]', //      。[file]         。[path]           ，[query]          
   algorithm: 'gzip',//  
   test: new RegExp(
     '\\.(js|css)$'  //   js   css
   ),
   threshold: 10240,//           。     
   minRatio: 0.8//                  
})
]

압축 결과:


html 압축 을 열 고 위 에 생 성 된 정적 자원 을 자동 으로 추가 합 니 다.
플러그 인 추가
설치: html-webpack-plugin용법:

plugins:[
 new HtmlWebpackPlugin({
   title: '',
     template: __dirname + '/../public/index.html',
     minify: {
       removeComments: true,
       collapseWhitespace: true,
       removeRedundantAttributes: true,
       useShortDoctype: true,
       removeEmptyAttributes: true,
       removeStyleLinkTypeAttributes: true,
       keepClosingSlash: true,
       minifyJS: true,
       minifyCSS: true,
       minifyURLs: true,
     },
     chunksSortMode:'dependency'
   }),
]

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.