[페이지 로딩 속도 개선 #1] 페이지 로딩 속도 개선 - vue webpack 에서 vite 로 빌드 방식 변경

vue 로 제작된 웹 페이지의 속도개선을 요청받았다.

주로 카카오톡의 웹뷰에서 실행되는 페이지 이다.

우리나라는 네트워크 속도가 충분히 빨라서 대부분의 사용자는 인지 하지 못 하지만, 모바일은 간혹 중요한 순간에 네트워크 속도 때문에 페이지가 굉장히 느리게 열릴 수 도 있다. (터널 속, 지하주차장, 산 정상 등등) 때문에 페이지 로딩 속도 최적화에 대한 이슈가 있었다.

 

수정내용

1. index.html 위치 및 내용 수정

설명	이미지
webpack 의 프로젝트/public/index.html 위치에 index.html 이 위치하였으나 vite 로 변경 후에는 프로젝트 폴더 최상단에 index.html 을 위치시켜줬다.
script 태그 추가해주기

 

2. .env 관련 내용 수정

3. vite.config.js 생성

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue'],
        },
      },
      // JavaScript 최적화 설정 추가
      terserOptions: {
        compress: {
          // 코드 압축 설정
          drop_console: true, // console.log를 제거합니다.
          drop_debugger: true, // debugger 문을 제거합니다.
        },
      },
    },
  },
  server: {
    proxy: {
      // 필요한 경우 프록시 설정을 추가합니다.
    },
  },
});

4. require 문법을 import 로 변경

 

개선결과

환경	기존	개선후
no throttling	380ms	250ms
Fast 3G	15초	5초 이내