[Issue] Vite-Vue 프로젝트

그룹과제를 진행을 시작한 후 개발서버를 한번 열때마다 1분 30초~2분이 넘어가는 시간동안의 시간이 걸리는 이슈가 발생했습니다.

기존에 개인 프로젝트 폴더를 만들어 사용을 하던 코드를 팀 프로젝트 폴더롤 복사 붙여넣기를 한 상황에서, 기존 프로젝트는 정상적으로 개발서버가 오픈되었지만 팀 프로젝트에서는 이러한 이슈가 발생을 했습니다.

무엇보다 다른 팀원들의 경우 큰 어려움 없이 진행을 하고 있었던터라 어떤 부분에서 문제가 발생하는지 찾기가 더 어려웠습니다.🐥

문제 상황

• 팀 프로젝트에 개인프로젝트에서 관리를 하던 코드를 붙여넣은 후 개발서버를 한번 열때마다 너무 많은 시간이 소요.
• 코드를 관리하던 원본 프로젝트에서는 문제가 발생하지 않음
• 다른 팀원들 역시 별다른 문제가 발생하지 않음

문제 원인

• scss의 전역설정 중 사용하고 있는 additionalData: '@import "~/scss/main" + 무거운 부트스트랩을 전부 불러오며 발생한 이슈이었습니다.
• additionalData 이 되어 있으면 scss 파일마다(컴포넌트 <style lang=”scss”>) 마다 추가되어 컴파일이 진행되게 됩니다.
• 거기에 더해 다소 무거운 부트스트랩 파일들을 불러오며 한 컴포넌트마다 소용되는 시간이 증가하게 된 것입니다. (컴포넌트를 다수 관리하던 상황이었습니다.)

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {find :'~', replacement: `${__dirname}/src`},
    ]
  },
  css: {
   preprocessorOptions: {
     scss: {
      additionalData: '@import "~/scss/main";'
    }
  }
 }
})

main.scss

$primary: #F2555A;
// Required
// @import "../../node_modules/bootstrap/scss/functions";
// @import "../../node_modules/bootstrap/scss/variables";
// @import "../../node_modules/bootstrap/scss/mixins";

@import "../../node_modules/bootstrap/scss/bootstrap";

각 컴포넌트.vue

<style lang="scss">

</style>

문제해결

• 부트스트랩을 모두 불러오는 것이 아니라 부트스트랩 변수 관련 scss 만 따로 분리해서 필요한 부분만 프로젝트로 @import

src/scss/split/splite.scss

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)

@import "../../../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../../../node_modules/bootstrap/scss/variables";  // defaults are here

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";

src/scss/split/main.scss

@import "./global.scss";

// Layout & components
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";

// 6. Optionally include any other parts as needed
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/containers";
@import "../../../node_modules/bootstrap/scss/grid";
@import "../../../node_modules/bootstrap/scss/tables";
@import "../../../node_modules/bootstrap/scss/forms";
@import "../../../node_modules/bootstrap/scss/buttons";
@import "../../../node_modules/bootstrap/scss/transitions";
@import "../../../node_modules/bootstrap/scss/dropdown";
@import "../../../node_modules/bootstrap/scss/button-group";
@import "../../../node_modules/bootstrap/scss/nav";
@import "../../../node_modules/bootstrap/scss/navbar";
@import "../../../node_modules/bootstrap/scss/card";
@import "../../../node_modules/bootstrap/scss/accordion";
@import "../../../node_modules/bootstrap/scss/breadcrumb";
@import "../../../node_modules/bootstrap/scss/pagination";
@import "../../../node_modules/bootstrap/scss/badge";
@import "../../../node_modules/bootstrap/scss/alert";
@import "../../../node_modules/bootstrap/scss/progress";
@import "../../../node_modules/bootstrap/scss/list-group";
@import "../../../node_modules/bootstrap/scss/close";
@import "../../../node_modules/bootstrap/scss/toasts";
@import "../../../node_modules/bootstrap/scss/modal";
@import "../../../node_modules/bootstrap/scss/tooltip";
@import "../../../node_modules/bootstrap/scss/popover";
@import "../../../node_modules/bootstrap/scss/carousel";
@import "../../../node_modules/bootstrap/scss/spinners";
@import "../../../node_modules/bootstrap/scss/offcanvas";
@import "../../../node_modules/bootstrap/scss/placeholders";
@import "../../../node_modules/bootstrap/scss/helpers";


// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../../../node_modules/bootstrap/scss/utilities/api";

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {find :'~', replacement: `${__dirname}/src`},
    ]
  },
  css: {
   preprocessorOptions: {
     scss: {
      additionalData: '@import "~/scss/main";'
    }
  }
 }
})

도움을 주신 광현님 너무 감사합니다😊