번들러 없이 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
'source' 카테고리의 다른 글
C에서 1123456789에서 1,123,456,789까지의 숫자를 포맷하려면 어떻게 해야 합니까? (0) | 2022.07.17 |
---|---|
nuxt.js Vuex Vuejs 정의되지 않은 속성 'getters'를 읽을 수 없습니다. (0) | 2022.07.17 |
오류: 유감스럽게도 비 Gradle Java 모듈과 > Android-Gradle 모듈을 하나의 프로젝트에 포함할 수 없습니다. (0) | 2022.07.17 |
pthread_cond_wait 대 세마포 (0) | 2022.07.17 |
uint_fast32_t는 무엇이며 일반 int 및 uint32_t 대신 사용해야 하는 이유는 무엇입니까? (0) | 2022.07.17 |