Vuetify 기반 라이브러리, 사용 방법 및 성능 문제 방지 팁

소개

스타트업 내부에 디자인 시스템을 구축하는 방법은 무엇입니까?
저는 이 아키텍처를 담당하는 프론트 엔드 기술 리더인 Rafael Bastiansch입니다. Logcomex에서 디자인 시스템을 구축하고 개인 프로젝트나 작업을 위한 유사한 도구를 구축하는 데 도움이 되는 방법을 보여 드리겠습니다. 오늘 스택을 보여 드리겠습니다. 왜 우리 도서관이 이런 식으로 지어졌는지.
귀하가 당사 비즈니스에 대해 편안하게 느끼실 수 있도록 Logcomex에서 당사 프로젝트를 설명하겠습니다.

가장 큰 것은 다른 목적을 공유하는 모놀리식 유형입니다.

새 프로젝트가 Nuxt 으로 생성됩니다.

우리는 동일한 디자인으로 새 프로젝트를 만들고 싶었지만 별도의 저장소에 있었기 때문에 기본 구성 요소를 재사용해야 했습니다. 아이디어는 코드 조각을 공유하는 라이브러리를 만드는 것이었습니다.

롤업이 있는 첫 번째 버전

첫 번째 버전은 롤업으로 빌드되었지만 시작한 직후에 몇 가지 문제가 있습니다. vuetify 및 분리된 scss의 복잡한 구성 요소를 사용하여 라이브러리를 컴파일하는 데 몇 가지 오류가 생성되기 시작했습니다. 그래서 나는 무슨 일이 일어나고 있는지 알아내야 했고, 몇 가지 POC 후에 Vue-CLI를 시도했고 그것은 매력처럼 작동합니다. 그래서 우리는 시간이 부족하여 계속 사용하기로 결정했습니다.

vue-cli가 있는 버전

Vue-CLI 몇 가지 좋은 기능이 내장되어 있고 라이브러리에 vue 구성 요소를 빌드하는 것도 그 중 하나였습니다.

Vue-CLI로 라이브러리를 생성하기 위해 지침에 따라 프로젝트를 시작하고 일부 구성을 vue.config.js에 추가했습니다.

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "~": path.resolve(__dirname)
      }
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/assets/scss/_main.scss";
        `
      }
    }
  }
}

스크립트를 package.json에 추가하여 라이브러리를 빌드합니다.

...
"scripts": {
    "build": "vue-cli-service build --target lib src/index.js",
},
...

우리 lib의 구조에는 src/index.js 파일이 있습니다. 여기에서 모든 구성 요소를 가져오고 다른 프로젝트에서 이 패키지를 사용할 때 가져올 수 있도록 준비합니다. 이에 대한 자세한 내용은 여기에서 확인할 수 있습니다. Vue cookbook

export * from './components/inputs'
import * as inputs from './components/inputs'


const components = {
    ...inputs,
}

export function install (Vue) {
    for (const [name, component] of Object.entries(components)) {
        Vue.component(name, component)
    }
}

const plugin = {
  install
}

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  // eslint-disable-next-line no-undef
  GlobalVue = global.Vue
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

export default plugin;

기본적으로 이들은 Vue-CLI로 자신의 라이브러리를 시작하기 위해 생성/수정해야 하는 모든 파일입니다.

현재 버전 및 문제

우리는 거의 1년 동안 Vue-CLI를 사용하여 현재 버전 빌드를 실행하고 있으며, 만들어진 것과 동일한 방식을 유지하고 있으며 지금까지 우리에게 좋습니다. 하지만 몇 가지 개선해야 할 사항이 있습니다. 우리는 현재 프로젝트에서 이 생각을 했기 때문에 호환성을 유지해야 합니다.
우리가 그것을 소비하는 동안 몇 가지 오류를 발견했기 때문에 우리는 우리 패키지 내에 외부 라이브러리를 구축하는 것을 유지하는데 이것이 문제입니다. 외부 설치가 필요한 새로운 기능을 추가함에 따라 패키지의 크기가 증가합니다. 현재 크기는 219KB로 압축되어 있습니다.

일부 수정 사항이 포함된 새 버전

그래서 지금은 이를 개선하기 위해 노력하고 있습니다. 우선 모든 세 번째 패키지를 외부로 설정했습니다. 이렇게 하면 이전 파일의 크기가 이전보다 거의 4배 적은 58KB로 압축되었습니다. 이를 달성하려면 configureWebpack 키 내부vue.config.js에서 라이브러리를 외부로 설정해야 하며 더 이상 컴파일되지 않습니다.

...
externals: [
  'dayjs',
  'moment',
  'ramda',
  'sortablejs'
],
...

일부 종속성을 devDependencies로 마이그레이션하십시오(죄송합니다, 내 실수). 현재 내가 하고 있는 변경 사항입니다. 이 새 빌드를 프로덕션에 사용한 후에는 충분할지 또는 lib가 더 많이 개선되는지 확인할 것입니다.

그것을 확인하고 사용하거나 기여하고 싶다면, 당신은 더 이상 환영받을 것입니다.
Project github
New branch with improvement