요구사항: 이전 .NET Framework MVC 프로젝트에서는 Microsoft의 Microsoft.AspNet.Web.Optimization 라이브러리를 사용하여 JS, CSS를 번들로 묶고 압축할 수 있습니다. ASP.NET Core를 사용한 후에는 기존 JS와 CSS 파일을 어떻게 번들링하고 압축하나요?
.NET Framework 프로젝트는 다음과 같은 내용을 참조합니다:
샘플 코드:
제본
번들링은 여러 파일을 하나의 파일로 결합합니다. 번들링은 웹 페이지를 렌더링하는 데 필요한 서버 요청 수를 줄여줍니다. CSS, JavaScript 등 다양한 개별 번들을 원하는 만큼 만들 수 있습니다. 브라우저에서 서버로, 또는 애플리케이션을 제공하는 서비스에서 전송되는 파일 수가 줄어들면 됩니다HTTP 요청 수가 줄어들었습니다。 이로 인해 홈페이지 로딩 성능이 향상됩니다.
압축
기능을 변경하지 않고 불필요한 문자를 제거하세요. 그 결과는CSS, 이미지, 자바스크립트 파일 등 요청된 자원의 크기가 크게 줄어듭니다。 최소화의 일반적인 부작용으로는 변수 이름을 한 문자로 단축하고 주석과 불필요한 공백을 제거하는 것이 있습니다. 동시에,코드를 혼란스럽게 해.이 때문에 다른 경쟁자들이 우리 소스 코드를 읽는 데 유리하지 않습니다.
번들링과 압축을 통한 성능 향상
다음 표는 자산을 개별적으로 불러오는 것과 번들링 및 미니파이션 사용의 차이점을 설명합니다:
트래픽을 절약하고 네트워크 전송 측면에서 로딩 속도를 향상시키며, HTTP 요청을 줄이고 로딩 속도를 향상시킵니다.
HTTP 요청 헤더의 경우, 브라우저는 매우 상세합니다. 번들로 묶으면 총 전송 바이트 수가 크게 줄어듭니다. 로딩 시간은 크게 개선되었지만, 이 예시는 로컬에서 실행됩니다. 번들링과 미니파이션은 네트워크를 통해 전송되는 자산과 결합하여 더 높은 성능 향상을 달성할 수 있습니다.
ASP.NET Core는 자체 번들 및 압축 솔루션이 없으며, 제3자가 제공하는 솔루션을 사용해야 합니다. 이 문서에서는라이거샤크.웹옵티제너.코어(도서관에서 결국 전화가 왔다.)뉴글리파이JS 및 CSS 처리 구현), GitHub 주소:하이퍼링크 로그인이 보입니다.
먼저, Core 6 ASP.NET 새 프로젝트를 만들고 다음 명령어를 실행해 참조합니다:
프로젝트 wwwroot에 테스트 css와 js 파일을 저장할 새 정적 폴더를 만들어 주세요. 아래에 표시된 새로운 CSS와 JS 파일을 생성합니다:
Program.cs 파일을 수정하고 WebOptimizer 서비스와 미들웨어를 추가하세요. 주요 코드는 다음과 같습니다:
프로젝트를 시작하려고 할 때, CSS와 JS 코드의 주석이 모두 삭제되었고, 파일들이 압축되었으며, JS의 일부 변수가 아래 그림과 같이 한 글자로 축소된 것을 발견할 수 있습니다:
그 다음 정적 폴더에서 새 js 파일을 만들어 번들 기능을 테스트하세요.test.js와 test2.js을 하나의 common.js 파일로 묶으세요(그리고 common.js 물리 파일을 생성하지 않음), 구성 코드는 다음과 같습니다:
렌더링은 다음과 같습니다:
참조:
하이퍼링크 로그인이 보입니다.
하이퍼링크 로그인이 보입니다.
|
2022-3-28 20:55:50에 게시됨
|
|
|
|
집주인|
2022-3-28 20:56:47에 게시됨
|
2022-3-29 00:38:21에 게시됨
|
(중복 댓글을 삭제하는 방법을 모르겠으니, 웹마스터가 이 글을 보면 삭제해 주세요)