source

번들러 없이 Vue를 사용하시겠습니까?

gigabyte 2022. 7. 17. 16:45
반응형

번들러 없이 Vue를 사용하시겠습니까?

번들하지 않고 JavaScript를 사용하는 실험 웹사이트를 만들고 있습니다.의존관리의 경우 Require를 사용했습니다.지금까지 JS를 사용했지만 시스템을 사용하기 시작했습니다.JS는 최근 HTTP2를 매우 잘 지원하고 있습니다.지금까지 커스텀 세트 웹 서버에서 몇 가지 실험을 해봤는데, 제가 만들고 있는 웹 사이트에 대한 결과는 훌륭합니다.예를 들어, 첫 페이지 렌더링은 약 400ms, 전체 페이지 로드는 800ms 등에 발생합니다.

HTTP2를 최대한 활용하고 특정 시점에서 사용 중인 스크립트만 로드하고 싶기 때문에 이 작업을 수행합니다.이와 같은 코드는 유지보수가 더 쉽고 캐시도 더 잘 됩니다.현재 웹팩과 같은 번들러에 대한 열풍이 불고 있지만, 제가 사용하고 싶은 것은 아닙니다.

여기서 질문하겠습니다.Gulp을 사용하여 단일 Vue 파일/컴포넌트를 컴파일한 후 시스템에 로드하는 방법이 있습니까?JS(AMD 또는 Common)JS 모듈?

편집:

이것이 내가 시스템으로 달성하고자 하는 것이다.JS 및 Vue:

진입점 JS 파일:

// SystemJS config
SystemJS.config({
  /* ... */
  
  baseURL: './',
  map: {
    // App
    'app': 'scripts/app.min.js',
  
    // Utils
    'axios': 'scripts/vendor/axios/axios.min.js',
    'modernizr': 'scripts/vendor/modernizr/modernizr.min.js',    
  
    // Framework
    'vue': 'scripts/vendor/vue/vue.min.js',
    
    // Components
    'vueHelloWorld': 'scripts/components/hello/vueHelloWorld.js', // <- Compiled VUE component
    'vueMenu': 'scripts/components/menu/vueMenu.js'
  },
  depcache: {
    'vueHelloWorld': ['vue'],
    'vueMenu': ['vue', 'vueHelloWorld']
  }
  
  /* ... */
)};

// Initially Load default scripts
require(['modernizr', 'axios', 'app']);

Vue 컴포넌트vueHelloWorld.js그리고.vueMenu.js단일 파일 템플릿에서 순수 JS로 컴파일된 최종 결과입니다.vueHelloWorld.vue그리고.vueMenu.vue.

그 첫 번째 파일 이후에app.min.js로딩되며 렌더링된 vue 컴포넌트를 로드하기 위한 선언이 있습니다.

이런 식으로 로드하는 각 Vue 컴포넌트에 대해 개별 파일을 렌더링하는 방법은 다음과 같습니다.

제가 질문을 올바르게 이해했다면, 당신이 원하는 것은 하나의 *.vue 파일을 가져와서 하나의 컴파일된 *.js 파일을 반환하는 것입니다.https://github.com/vuejs/vue-component-compiler,을 사용하여 직접 작성하거나 롤업을 vue 컴파일러로 잘못 사용하여 모든 종속성을 무시하고 하나의 vue 컴포넌트만 컴파일하도록 구성할 수 있습니다.여기에서는, 이것을 실현하는 설정을 확인할 수 있습니다.https://github.com/ecosia/bazel_rules_nodejs_contrib/blob/master/internal/vue_component/rollup.config.js

당신이 찾고 있는 것은 비동기 컴포넌트와 웹팩 코드 분할인 것 같습니다.

이 문서의 사용법은 다음과 같습니다.

https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/

아니요. 단일 Vue 파일(*.vue)은 웹 팩을 통해서만 vue 로더에 의해 인식되기 때문입니다.JS, AMD 또는 CommonJ는 전혀 관련이 없습니다.이 세 가지는 모듈러형 표준 또는 javascipts 파일을 정리하는 방법입니다.

또한 당신은 이런 식으로 글을 쓸 수 있습니다.

a.component.module

var ComponentA = {
    template: '#view-a',
}

b.component.displaces

var ComponentB = {
    template: '#view-b',
}

html 파일에서

<script type="text/x-template" id="view-a">
    <div> .... </div>
</script>

<script type="text/x-template" id="view-b">
    <div> .... </div>
</script>

언급URL : https://stackoverflow.com/questions/48245880/using-vue-without-bundlers

반응형