웹팩
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
최신 웹 애플리케이션을 위한 번들
최신 웹 애플리케이션에서는 번들 도구 를 사용하여 최적화 되고 축소 되며 사용자가 더 빠르게 다운로드할 수 있는 파일 (스크립트, 스타일시트 등)의 프로덕션 '번들'을 만드는 경우가 많습니다. webpack을 사용한 웹 성능 최적화 에서는 webpack 을 사용하여 사이트 리소스를 효과적으로 최적화하는 방법을 알아봅니다. 이렇게 하면 사용자가 더 빠르게 사이트를 로드하고 상호작용할 수 있습니다.
webpack은 오늘날 가장 많이 사용되는 번들 도구 중 하나입니다. 최신 코드를 최적화하는 기능을 활용하여 중요한 부분과 중요하지 않은 부분으로 스크립트를 코드 분할 하고 사용되지 않는 코드를 제거 (몇 가지 최적화만 포함)하면 앱의 네트워크와 처리 비용을 최소화할 수 있습니다.
Susie Lu의
Bundle Buddy의 코드 분할 에서 영감을 얻었습니다.
먼저 최신 앱에서 비용이 가장 많이 드는 리소스 중 하나인 JavaScript를 최적화하는 방법을 살펴보겠습니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2018-02-08(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2018-02-08(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2018-02-08(UTC)"],[],[]]