네트워크 페이로드 축소 및 압축
웹 페이지의 성능을 향상시키는 데 사용할 수 있는 두 가지 유용한 기술이 있습니다.
- 축소
- 데이터 압축
이 두 기술을 모두 통합하면 페이로드 크기가 줄어들고 페이지 로드 시간이 향상됩니다.
측정 #
Lighthouse는 페이지에서 축소할 수 있는 CSS 또는 JS 리소스를 감지하면 실패한 감사를 표시합니다.
또한 압축되지 않은 자산에 대해 감사합니다.
축소 #
축소는 더 작지만 완벽하게 유효한 코드 파일을 만드는 데 필요하지 않은 공백과 모든 코드를 제거하는 프로세스입니다. Terser는 널리 사용되는 JavaScript 압축 도구입니다. webpack v4에는 기본적으로 이 라이브러리에 대한 플러그인이 포함되어 있어 축소된 빌드 파일을 생성합니다.
- webpack v4 이상을 사용 중이라면 추가 작업 없이 진행하는 것이 좋습니다. 👍
- 이전 버전의 웹팩을 사용하는 경우 웹팩 구성 설정에
TerserWebpackPlugin을 설치하고 포함합니다. 설명서를 따라 방법을 알아보세요. Terser를 사용하지 않는 경우 Terser를 CLI 도구로 사용하거나 애플리케이션에 대한 종속성으로 직접 포함하십시오. 프로젝트 문서에 지침이 나와 있습니다.
데이터 압축 #
압축은 압축 알고리즘을 사용하여 데이터를 수정하는 프로세스입니다. Gzip은 서버 및 클라이언트 상호 작용에 가장 널리 사용되는 압축 형식입니다. Brotli는 Gzip보다 훨씬 더 나은 압축 결과를 제공할 수 있는 최신 압축 알고리즘입니다.
브라우저로 보낸 파일을 압축하는 방법에는 두 가지가 있습니다.
- 동적으로
- 정적으로
두 접근 방식 모두 다음 섹션에서 다룰 고유한 장점과 단점이 있습니다. 애플리케이션에 가장 적합한 것을 사용하십시오.
동적 압축 #
이 프로세스에는 브라우저에서 요청할 때 자산을 즉석에서 압축하는 작업이 포함됩니다. 이것은 수동으로 또는 빌드 프로세스를 사용하여 파일을 압축하는 것보다 간단할 수 있지만 높은 압축 수준을 사용하는 경우 지연이 발생할 수 있습니다.
Express는 Node용으로 널리 사용되는 웹 프레임워크이며 압축 미들웨어 라이브러리를 제공합니다. 요청 시 자산을 압축하는 데 사용합니다. 다음은 올바르게 사용하는 전체 서버 파일의 예입니다.
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
app.use(express.static('public'));
const listener = app.listen(process.env.PORT, function() {
console.log('Your app is listening on port ' + listener.address().port);
});gzip를 사용하여 자산을 압축합니다. 웹 서버가 지원하는 경우 더 나은 압축 비율을 달성하기 위해 Brotli를 통해 압축하기 위해 Shrink-ray와 같은 별도의 모듈을 사용하는 것이 좋습니다.
정적 압축 #
정적 압축에는 미리 자산을 압축하고 저장하는 작업이 포함됩니다. 이렇게 하면 특히 높은 압축 수준을 사용하는 경우 빌드 프로세스가 더 오래 걸릴 수 있지만 브라우저가 압축된 리소스를 가져올 때 지연이 발생하지 않습니다.
웹 서버가 Brotli를 지원하는 경우 웹팩과 함께 BrotliWebpackPlugin과 같은 플러그인을 사용하여 빌드 단계의 일부로 자산을 압축합니다. 그렇지 않으면 CompressionPlugin을 사용하여 gzip으로 자산을 압축합니다. webpack 구성 파일에 다른 플러그인과 마찬가지로 포함될 수 있습니다.
module.exports = {
//...
plugins: [
//...
new CompressionPlugin()
]
}압축 파일이 빌드 폴더의 일부가 되면 서버에서 모든 JS 끝점을 처리하여 압축 파일을 제공하는 경로를 만듭니다. 다음은 gzip으로 압축된 자산에 대해 Node 및 Express로 이를 수행하는 방법의 예입니다.
const express = require('express');
const app = express();
<strong>app.get('*.js', (req, res, next) => {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
next();
});</strong>
app.use(express.static('public'));