우리 문서 사이트는 이미 Webpack 5를 사용하고 있습니다.

며칠 전 Webpack 5가 출시되었습니다. Webpack은 놀라운 커뮤니티에 보답하기 위해 몇 가지 버그를 찾고 수정하기 위해 업그레이드our documentation site하기로 결정한 훌륭한 도구입니다.
우리는 어떤 버그도 발견하지 못했지만 Webpack을 업그레이드하는 것은 (그리고 항상 그랬던) 큰 기쁨입니다. 훌륭한 문서, 마이그레이션 가이드, 변경 로그, GitHub 지원.

문제

마이그레이션하는 동안 두 가지 문제만 발생했습니다.

생산 빌드 시간이 느려집니다. 약 2배 느립니다. 이는 시간이 지남에 따라 개선될 수 있고 영구 캐시로 인해 증분 빌드가 훨씬 빠르기 때문에 큰 문제가 아닙니다. 별거 아닙니다.

누락된 process 개체로 인해 Docsearch(Algolia에서 제공하는 검색 스크립트)가 작동하지 않았습니다. The is described Webpack 5 마이그레이션에서(그러나 이를 알기 위해서는 읽어야 함) 몇 줄의 polyfill이 이를 수정했습니다.

  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    },
  })

크레딧: https://github.com/algolia/docsearch/issues/980#issuecomment-708388893

지원 중단, 경고

Webpack 경고 및 오류는 다른 모든 것을 전달하므로 모든 구성 업데이트가 매우 쉬웠고 약간 정리할 때 올바른 방향을 제시했습니다. 사용되지 않은 2개의 로더와 1개의 구성 옵션을 찾았습니다.

빌드 요약

버전 4에서 스캔하기가 훨씬 쉬워졌기 때문에 빌드 요약이 시각적으로 개선되기를 바랍니다.

전에:


후에:


업데이트: 색상이 5.1.3으로 돌아왔습니다 :)



귀하의 마이그레이션이 우리만큼 원활하게 진행되고 빌드가 더 작아지기를 바랍니다. :)

더 읽어보기

보다 성능 지향적인 콘텐츠에 관심이 있는 경우 저를 따르십시오. 귀하의 웹 사이트를 개선하는 독창적이거나 최소한 효과적인 방법을 제공할 것을 약속드립니다.

기존 웹페이지에서 WebP 사용

Paweł Kowalski ・ 11월 17일 ・ 4분 읽기

#webperf #design

웹용 이미지 최적화

Paweł Kowalski ・ 4월 24일 ・ 8분 읽기

#beginners #node

웹사이트 속도를 유지하기 위한 3가지 팁

Paweł Kowalski ・ 6월 24일 ・ 6분 읽기

#webperf #webpack #javascript #css