웹 팩으로 성능 예산을 시행합니다

최신 웹 응용 프로그램은 더 이상 하나의 거대한 JavaScript 패키지에 의존하지 않습니다. 연구에 따르면 더 큰 패키지는 특히 저지대 및 미드 엔드 모바일 장치에서 메모리 사용 및 CPU로드를 증가시킵니다. WebPack은 패키지 크기를 줄이고 자원을 제어하는 ​​여러 기능을 제공하며 가장 중요한 것은 코드 세분화 및 성능 힌트입니다. 코드 세분화는 코드를 여러 패키지로 나누어 주문형 또는 병렬로로드합니다. 성능 팁은 불필요한 코드를 최적화하거나 삭제하기 위해 구축 할 때 패키지 크기가 지정된 임계 값을 초과하는지 여부를 감지합니다.

Webpack 기본적으로 자원 크기 또는 진입 점이 250kb (244kib)를 초과 할 때 경고가 발행되지만 성능 프롬프트의 속성 및 크기 임계 값이 webpack.config.js 파일의 performance 객체를 통해 표시되는 방법 및 크기 임계 값을 구성 할 수 있습니다. 이 기사는 성능 저하를 방지하기 위해이 기능을 첫 번째 방어선으로 사용하는 방법을 설명합니다.

예산을 사용자 정의하십시오

기본 리소스 및 진입 점 크기 임계 값은 항상 귀하의 요구와 일치하지는 않지만 구성 할 수 있습니다. 예를 들어, 작은 블로그의 예산은 각 리소스 및 진입 지점 각각 50kb (48.8kib) 일 수 있습니다. webpack.config.js 의 관련 설정은 다음과 같습니다.

 module.exports = {
  성능: {
    maxassetsize : 50000,
    MaxentRypointsize : 50000,
  }
};

maxAssetSize 및 maxEntrypointSize 속성은 각각 자원 및 진입 점의 임계 값 크기 (바이트)를 제어합니다. maxEntrypointSize entry Object (일반적으로 JavaScript 또는 SASS 파일)에 나열된 파일에서 생성 된 패키지가 지정된 임계 값을 초과하지 않도록합니다. maxAssetSize WebPack (예 : 이미지, 글꼴 등)에 의해 생성 된 다른 리소스에 대해 동일한 제한을 시행합니다.

임계 값이 초과 될 때 오류가 나타납니다

Webpack은 예산 임계 값이 기본적으로 초과 될 때 경고를 발행합니다. 이것은 개발 환경에 충분하지만 생산 환경에는 충분하지 않습니다. hints 속성을 performance 객체에 추가하여 'error' 로 설정하여 오류를 트리거 할 수 있습니다.

 module.exports = {
  성능: {
    maxassetsize : 50000,
    MaxentRypointsize : 50000,
    힌트 : '오류',
  }
};

hints 속성에 대한 다른 유효한 값은 'warning' 및 false 입니다. 지정된 한계를 초과하더라도 false 경고를 완전히 비활성화합니다. 생산 모드에서 false 사용하는 것이 좋습니다.

특정 자원을 제외합니다

Webpack은 생성하는 각 유형의 리소스에 대한 크기 임계 값을 시행합니다. 자원이 지정된 한계를 초과하면 오류가 발생합니다. 예를 들어, WebPack이 이미지를 처리하도록 구성된 경우 이미지 중 하나가 임계 값을 초과하는 한 오류가 발생합니다.

assetFilter 속성은 성능 프롬프트를 계산하는 데 사용되는 파일을 제어하는 ​​데 사용될 수 있습니다.

 module.exports = {
  성능: {
    maxassetsize : 50000,
    MaxentRypointsize : 50000,
    힌트 : '오류',
    AssetFilter : function (assetfilename) {
      return! assetfilename.endswith ( '. jpg');
    },
  }
};

이를 통해 WebPack은 성능 프롬프트 계산을 실행할 때 .jpg 에서 끝나는 파일을 제외하도록 지시합니다. 보다 복잡한 논리를 사용하여 다양한 환경, 파일 유형 및 기타 리소스의 조건을 충족 할 수 있습니다.

한계

한 가지 제한은 동일한 예산 임계 값이 모든 자원 및 진입 지점에 적용된다는 것입니다. 다시 말해, JavaScript, CSS 및 이미지 파일에 대한 다른 제한을 설정하는 것과 같은 여러 예산이 아직 필요하지 않습니다. 그러나이 제한을 제거 해야하는 공개 풀 요청이 이미 있습니다.

요약

프로젝트 시작시 성과 예산을 설정하고 시행하는 것이 유용합니다. 의존성의 규모에주의를 기울이고 예산을 피하기 위해 더 가벼운 대안을 찾도록 격려 할 것입니다.

그러나 성과 예산은 거기서 멈추지 않습니다! 자원 규모는 성능에 영향을 미치는 많은 요소 중 하나 일 수 있으므로 최상의 경험을 제공하기 위해 더 많은 작업이 필요합니다. 등대 테스트를 실행하는 것은 다른 메트릭과 개선을위한 제안을 이해하는 좋은 방법입니다.

위 내용은 웹 팩으로 성능 예산을 시행합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!