포장 최적화 실천 (어떻게 코드 분할)

프로젝트 주소: reactSPA
웹 팩 플러그 인 을 사용 하여 공간 이 큰 가방 을 찾 습 니 다.
개발 환경 에서 analysis - webpack - plugin 을 사용 하여 각 모듈 의 점용 상황 을 관찰 할 수 있 습 니 다.이 항목 의 경우 브 라 우 저 에 입력 http://localhost:3000/analyze.html 하면 다음 과 같은 효 과 를 볼 수 있 습 니 다.
필요 에 따라 불 러 오기

모듈 을 babel 과 결합 하여 필요 에 따라 로드 합 니 다.

테스트 day. js 대체 moment. js. 실제 moment. js 도 필요 에 따라 로드 (실험 40KB + 감소) 를 사 용 했 기 때문에 최종 결 과 는 차이 가 크 지 않다.

code-spliting
MiniCssExtractPlugin 플러그 인 을 사용 하여 JavaScript 와 Css 파일 을 분리 합 니 다.

  823.94 KB           build / static / js / main.496a38b7.js
  8.2 KB              build / static / css / main.css

code - spliting 은 공식 적 으로 세 가지 방안 을 제시 하 는데 각각 다음 과 같다.
프로젝트 1: entry 에 포장 입 구 를 추가 합 니 다.
방안 1 의 단점 은 다음 과 같다.

만약 에 여러 개의 파일 이 같은 가방 (예 를 들 어 lodash) 을 인용 하면 인용 한 가방 은 각각 두 번 포장 된다.

이런 방안 은 유연성 이 부족 하여 논리 적 동태 에 따라 코드 를 분할 할 수 없다.

그래서 방안 1 은 보통 방안 2, 방안 3 과 결합 하여 사용 하 는데 방안 1 의 설정 은 대체적으로 다음 과 같다.

entry: [require.resolve('./polyfills'), paths.appIndexJs],

//      

entry: {
  polyfill: require.resolve('./polyfills'),
  IndexJs: paths.appIndexJs,
},

프로젝트 2: 플러그 인 사용 SplitChunkPlugin

  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          maxAsyncRequests: 5,
          priority: 10,
          enforce: true,
        },
      },
    },
  },

포장 효 과 는 다음 과 같 습 니 다:

  723.96 KB  build/static/js/vendor.a9289a29.chunk.js // node-modules   
  98.72 KB   build/static/js/main.7bcaca24.js
  8.2 KB     build/static/css/1.css

이 때 node - modules 의 가방 을 큰 덩어리 로 포장 하면 로 딩 에 여전히 우호 적 이지 않 습 니 다.솔 루 션 은 핵심 프레임 워 크 를 따로 포장 하고 나머지 모듈 을 비동기 로 불 러 옵 니 다. 예 를 들 어 bundle - loader 를 사용 할 수 있 습 니 다).

  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        vendor1: { //     
          chunks: 'all',
          test: /[\\/]node_modules[\\/](react|react-dom|antd)[\\/]/,
          name: 'vendor1',
          maxAsyncRequests: 5,
          priority: 10,
          enforce: true,
        },
        vendor2: { //     
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor2',
          maxAsyncRequests: 5,
          priority: 9,
          enforce: true,
          reuseExistingChunk: true,
        },
      },
    },
  }

포장 효 과 는 다음 과 같 습 니 다:

  588.06 KB  build/static/js/vendor2.d63694f4.chunk.js
  133.17 KB  build/static/js/vendor1.0d40234c.chunk.js
  98.72 KB   build/static/js/main.b7a98d03.js
  8.2 KB     build/static/css/2.css

이 때 를 볼 수 있 습 니 다 nodemodules 패 키 지 는 이미 핵심 모듈 과 비 핵심 모듈 로 나 뉘 었 다.
동적 도입 문법 사용 import()먼저 홈 페이지 앤 리 의 react - loadable 이 가방 을 사용 합 니 다. 이 가방 은 (대체 모듈) 코드 의 동적 분할, 비동기 로 필요 한 구성 요 소 를 불 러 와 페이지 로 딩 속 도 를 크게 향상 시 키 는 것 이 사상 입 니 다.
루트 인터페이스 에서 다음 설정 을 진행 합 니 다:

const Loading = () => 
Loading...

const Home = Loadable({
  loader: () => import('../pages/home'),
  loading: Loading,
})

//         

  
  
  
  
  
  
  
  
  
  

우 리 는 코드 분할 후의 결 과 를 보 았 다.
여기 서 테스트 결 과 는 방안 2 의 설정 을 제거 한 후에 진 행 된 것 이다. 실험 을 비교 한 후에 방안 3 을 사용 하 는 방식 은 방안 2, 3 이 공동으로 사용 하 는 방식 보다 약간 우수 하 다.

  235.89 KB  build/static/js/IndexJs.57ee1596.js
  225.94 KB  build/static/js/15.c09a5919.chunk.js
  138.18 KB  build/static/js/17.30c26142.chunk.js
  82.71 KB   build/static/js/1.667779a6.chunk.js
  57.55 KB   build/static/js/16.f8fa2302.chunk.js
  16.46 KB   build/static/js/2.e7b77a5d.chunk.js
  14.79 KB   build/static/js/18.cad1f84d.chunk.js
  12.51 KB   build/static/js/0.73df11a7.chunk.js
  11.22 KB   build/static/js/13.19501c58.chunk.js
  8.34 KB    build/static/js/5.33fd1c35.chunk.js
  7 KB       build/static/js/8.9f1d0a47.chunk.js
  5.86 KB    build/static/js/12.24f0a7ec.chunk.js
  5.06 KB    build/static/css/18.css
  4.97 KB    build/static/js/polyfill.1c61a660.js
  3.58 KB    build/static/js/7.dd4976e3.chunk.js
  3.53 KB    build/static/js/14.16f6b811.chunk.js
  3.42 KB    build/static/css/17.css
  2.98 KB    build/static/js/10.464a61e4.chunk.js
  2.02 KB    build/static/js/11.3728d5a9.chunk.js
  1.45 KB    build/static/js/6.92fbac58.chunk.js
  1.13 KB    build/static/js/9.59160a3a.chunk.js

몇 개의 경로 가 있 으 면 react - loadable 라 이브 러 리 는 자동 으로 몇 개의 가방 파일 을 더 나 누 어 줍 니 다.큰 프로젝트 일수 록 이런 동 태 는 인 고 를 끌 어 들 이 는 장점 이 뚜렷 하 다 고 상상 할 수 있다.
그리고 우리 가 / home 에서 홈 구성 요소 만 불 러 왔 고 다른 구성 요소 만 불 러 오지 않 았 음 을 뚜렷하게 볼 수 있 습 니 다!
그러면 react - loadable 의 신비 한 힘 은 어떻게 실현 되 었 습 니까? 이 는 본질 적 으로 속성 대 리 를 활용 한 고급 함수 입 니 다. 고급 함수 에 배합 import() 을 통 해 각종 상 태 를 추가 하여 비동기 로드 모듈 의 효 과 를 얻 을 수 있 습 니 다.
참고 문헌
code-splittingCode-Splitting(react)