티스토리 뷰
서론
로딩 속도는 사용자 경험에서 중요한 역할을 한다!
그래서 웹팩의 장점 중 하나인 빠른 로딩 속도를 알아보고 싶어서 진행했다.
웹팩을 사용하지 않았을 때의 로딩 속도와 웹팩을 사용했을 때의 로딩 속도를 비교했다.
이 때 더 확실한 차이를 위해 개발자 도구에서 네트워크 속도를 느리게 낮춰서 진행했다.
본론
1. 웹팩을 사용하지 않을 때
1-1. 파일 생성 및 코드 작성하기
- index.html
<html>
<head>
<title>Webpack</title>
</head>
<body>
<script src="src/index.js"></script>
<script src="src/App.js"></script>
<script src="src/example.js"></script>
</body>
</html>- src/index.js
const Index = () => {
const element = document.createElement("div");
element.innerHTML = "<h2>Index 컴포넌트</h2>";
return element;
};
document.body.appendChild(Index());- src/App.js
const App = () => {
const element = document.createElement("div");
element.innerHTML = "<h2>App 컴포넌트</h2>";
return element;
};
document.body.appendChild(App());- src/example.js
const Example = () => {
const element = document.createElement("div");
element.innerHTML = "<h2>Example 컴포넌트</h2>";
return element;
};
document.body.appendChild(Example());1-2. index.html파일 live server로 열기
1-3. 개발자도구 Network 보기
2. 웹팩을 사용할 때
2-1. 웹팩을 사용하기 위해서는 Node.js와 NPM이 컴퓨터에서 설치되어 있어야 한다.
- Node.js 설치하면 기본적으로 NPM 설치된다
2-2. 터미널에서 npm init -y입력
- package.json 생성
2-3. npm i webpack webpack-cli --save-dev 입력
- 웹팩 관련 라이브러리 설치 (웹팩은 개발용(devDependencies)에 설치)
2-4. 파일 생성 및 코드 작성하기
- index.html
<html>
<head>
<title>Webpack</title>
</head>
<body>
<script src="build/main.js"></script>
</body>
</html>- src/index.js
import { Example } from "./example.js";
import { App } from "./App.js";
const Index = () => {
const element = document.createElement("div");
element.innerHTML = "<h2>Index 컴포넌트</h2>";
return element;
};
document.body.appendChild(Index());
document.body.appendChild(App());
document.body.appendChild(Example());- src/App.js
export const App = () => {
const element = document.createElement("div");
element.innerHTML = "<h2>App 컴포넌트</h2>";
return element;
};- src/example.js
export const Example = () => {
const element = document.createElement("div");
element.innerHTML = "<h2>Example 컴포넌트</h2>";
return element;
};- webpack.config.js (웹팩 환경 설정파일)
var path = require('path');
module.exports = {
mode: 'none',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'build')
}
};- package.json에서 "build": "webpack" 추가하기
"scripts": {
"build": "webpack"
}2-5. npm run build 입력
- 빌드 실행하기
2-6. index.html파일 live server로 열기
2-7. 개발자도구 Network 보기
3. 로딩 속도 비교하기
아래는 과정1의 웹팩을 사용하지 않았을 때의 결과이다
아래는 과정2의 웹팩을 사용했을 때의 결과이다
결론
위의 결과는 개발자도구 -> Network에서 볼 수 있다.
로딩 속도의 차이를 최대한 극대화 시키기 위해서, 위쪽에 네트워크 속도를 Slow 3G로 선택했다.
그 다음, 왼쪽에 보면 네트워크 요청한 파일의 갯수(requests) 차이를 볼 수 있다.
왼쪽 가장 아래에 보면 1번 웹팩을 사용하지 않았을 때는 5개의 HTTP 요청을 보냈고, 2번 웹팩을 사용했을 때는 3개의 HTTP 요청을 보냈다.
1번 웹팩을 사용하지 않았을 때는 html파일에서 <script>태그를 만날 때마다 requests를 하기 때문에 5개가 된 것이다.
requests(HTTP 요청)가 많아질 수록, 로딩 속도가 느려진다.
이것은 가장 아래에 Finish가 증명해주는데, 1번 웹팩을 사용하지 않았을 때는 6.14s가 걸렸지만, 2번 웹팩을 사용했을 때는 4.07s초 확실히 줄었다!
또한 브라우저마다 한 번에 서버로 보낼 수 있는 HTTP 요청(requests)의 갯수는 제약이 있다.
웹팩을 사용한다면, 위와 같은 브라우저별 HTTP 요청 숫자 제약을 피할 수 있으며, request가 줄어 초기 로딩속도가 빨라질 수 있다!!!
'프론트엔드' 카테고리의 다른 글
| 바벨 로더 설정하기 (0) | 2022.08.11 |
|---|---|
| CSS 로더 설정하기 (0) | 2022.08.11 |
| useRef와 useState의 변화에 따른 렌더링 차이 (0) | 2022.08.07 |
| PR에서 테스팅 후 성공시에만 자동 Merge하기 (0) | 2022.08.03 |
| useState 비동기 작동, 불변 메서드 문제 해결 과정 (0) | 2022.08.01 |
- Total
- Today
- Yesterday