Webpack 변환 전/후 성능비교

개인적인 Webpack 학습 및 공부 내용을 기록하기 위한 포스트입니다.

1. 변환 전 소스 및 성능

1-1. index.html

<!-- index.html -->
<html>
    <head>
        <title>Webpack Demo</title>
        <script src="https://unpkg.com/lodash@4.16.6"></script>
    </head>
    <body>
        <script src="src/index.js"></script>
        <!-- <script src="dist/main.js"></script> -->
    </body>
</html>

1-2. index.js

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

1-3. 변환 전 성능

2. Webpack 변환 후

2-1. index.html

<!-- index.html -->
<html>
    <head>
        <title>Webpack Demo</title>
        <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
    </head>
    <body>
        <!-- <script src="src/index.js"></script> -->
        <script src="dist/main.js"></script>
    </body>
</html>

2-2. index.js

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

2-3. webpack.config.js

var path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

2-4. 변환 후 성능

3. build 결과(dist/main.js)

웹팩 결과 파일 디렉터리 패스

4. 정리

변환 전의 경우에는 html 에서 sciprt 내 cdn 으로 불러왔기 때문에 lodash.js, index.js 를 호출하게 된다.

하지만 변환 후에는 main.js 에서 하나로 합쳐서 호출하기 때문에 호출하는 빈도가 줄어 페이지를 로딩할 때 속도 측면에서 큰 차이를 불러올 것이다.

위 테스트의 경우에는 간단한 테스트지만 코드가 복잡해지고 시스템 규모가 커질수록 속도나 효율성 측면에서 큰 차이를 불러올 것이므로 이에 대한 효과를 기록한다

main.js 호출 내 index.js

main.js 호출 내 lodash 관련

위 에서 볼 수 있듯이 우리가 호출한 index.js, lodash 등을 main.js 에서 하나로 합쳐서 호출한다는 개념이 Webpack 의 기본이라고 생각하면 될 것 이다.

이러한 점으로 인해서 우리는 Webpack 을 왜 사용하는가? 라는 물음에 조금이나마 이해하고 앞으로 발전해나갈 수 있는 토대가 될 것이기에 기록에 남긴다.

HELLO MY WORLD