Brotli 및 Gzip 텍스트 압축을 사용하여 Angular 앱의 성능 향상

텍스트 압축은 기본적으로 텍스트 기반 리소스의 파일 크기/페이로드를 줄여 전송되는 데이터의 양을 줄입니다. 압축된 텍스트 기반 리소스는 브라우저에 더 빠르게 전달되므로 전체 네트워크 바이트를 최소화하려면 텍스트 기반 리소스를 압축하여 제공해야 합니다.

Brotli 및 Gzip은 애플리케이션의 전체 번들 크기를 최소 50% 이상 크게 향상시켜 성능을 향상시킬 수 있는 압축 알고리즘입니다. 이 블로그 게시물에서는 번들의 Brotli 및 Gzip 버전을 생성하여 이를 지원하는 브라우저가 이를 요청하거나 지원하지 않는 경우 압축되지 않은 버전으로 대체할 수 있는 방법을 살펴봅니다.

각도에서 이를 달성하려면 빌드 프로세스 중에 추가 웹팩 플러그인을 실행할 수 있도록 프로덕션용 애플리케이션을 빌드할 때 사용되는 빌더를 확장해야 합니다. 필요한 플러그인은 다음과 같습니다.

Gzip 파일용 "compression-webpack-plugin "

Brotli 파일용 "brotli-webpack-plugin "

이 기술을 구현하려면:

npm install -D compression-webpack-plugin brotli-webpack-plugin를 실행하여 패키지를 개발 종속성으로 설치합니다.

custom-webpack.config.js 폴더에 플러그인을 실행할 사용자 정의 웹팩 구성( src ) 파일을 만듭니다. 파일에 다음을 붙여넣습니다.

const CompressionPlugin = require("compression-webpack-plugin");
const BrotliPlugin = require("brotli-webpack-plugin");

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "gzip",
    }),
    new BrotliPlugin(),
  ],
};

Run npm i -D @angular-builders/custom-webpack 이렇게 하면 추가 웹팩 구성을 실행할 수 있는 빌더가 설치됩니다.

build 속성 아래의 angular.json 파일에서 builder 속성 값을 바꾸고 options라는 새 속성을 해당 값으로 추가합니다.

...

"builder": "@angular-builders/custom-webpack:browser",
"options": {
    "customWebpackConfig": {
        "path": "src/custom-webpack.config.js",
        "replaceDuplicatePlugins": true
    }
}

....

위의 작업이 완료되면 ng build를 실행하십시오. 성공적으로 실행되면 크기가 훨씬 작아야 하는 모든 dist/projectName 파일의 .br 및 .gz 버전을 찾아야 하는 .js 폴더로 이동합니다.

또한 응용 프로그램이 배포되는 서버에 따라 .br 파일을 지원하기 위해 일부 구성이 필요할 수 있지만 대부분의 서버가 이를 지원한다는 것을 아는 것이 좋습니다.

보너스

이 기술은 웹의 모든 텍스트 기반 파일, 특히 css에 적용할 수 있으며, brotli의 도움으로 css 파일은 압축에 도움이 되는 반복 문자열이 많기 때문에 초기 크기의 70%까지 압축할 수 있습니다. 이러한 파일을 압축한 후 "Content-Encoding: br"및 "Content-Type"헤더를 서버에 배포할 때 브라우저에서 이해할 수 있도록 설정해야 합니다.

github에서 webpack 플러그인을 사용하여 brotli 알고리즘으로 파일을 압축하는 데 도움이 되는 자바스크립트 프로젝트를 만들었습니다. 텍스트 기반 웹 파일을 압축하는 데 자유롭게 사용하십시오.

다음은 NGINX 및 APACHE 서버에서 압축을 설정하는 방법에 대한 몇 가지 링크입니다.

Gzip on NGINX

Brotli on NGINX

Brotli on APACHE

검토자: 🙏🏽