개요

개발을 하다보면 웹사이트 성능 개선에 대한 글들을 많이 접하기 마련이고, 성능 개선이 웹사이트의 중요한 요소로서 여겨진다는 것을 알 수 있다. 웹사이트 성능 개선으로 사용자 경험을 높일 수 있고, 인프라 비용을 줄일 수도 있고, 생각해보면 성능 개선에 대한 장점들이 아주 많다. 이전에 진행했던 프로젝트들은 아무래도 연습 및 경험만을 위한 프로젝트가 대부분이었기에, 방문자가 현저히 적었고 이에 따라 자연스럽게 성능 개선의 필요성을 느끼지 못했었다. 하지만 이번에 실제 사용자들이 주기적으로 방문하는 헤어살롱 웹사이트 프로젝트를 진행함에 따라, 성능 개선은 필수라는 생각이 들었고, 성능 개선을 진행하면서 겪었던 과정들과, 학습 관련 기록들을 작성해 보고자 한다.

webpack 최적화

처음 webpack을 학습하면서, webpack 공식문서의 guide를 쭉 읽었던 적이 있다. 이 가이드에서는 웹팩을 처음 사용하기 위한 세팅부터, 최적화까지 다양한 내용을 안내해주는데, 지난번에 그냥 읽고 넘어갔던 최적화 관련 부분을 차근차근 읽어보며 내 웹사이트에서 적절히 적용할만한 최적화 기법들을 학습하고 적용해보고자 했다.

1. Code Splitting

기본적으로, 코드 스플리팅은 코드를 다양한 번들로 분할하고, 요청에 따라 로드(이는 lazy 로딩에 대한 설명과 비슷한데, lazy 로딩은 코드스플리팅의 한 기법(?)이라고 볼 수 있을 것 같다.)하거나 병렬로 로드할 수 있는 기능이다. 프로젝트의 전체 번들을 더 작은 번들로 만들고, 리소스 우선순위를 올바르게 제어하기 위해서 사용되며, 잘 활용하면 로드 시간에 큰 영향을 끼칠 수 있다.

공식 문서에 따라, 나는 다음과 같이 코드 스플리팅을 적용했다.

webpack.prod.js

//...

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },

//...

webpack.common.js

//...

module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    clean: true,
  },
  
//...