Vue.js에서 webpack으로 여러 컴포넌트를 병합打包하고 필요에 따라 로드하는 방법

머리말

모바일 장치의 업그레이드와 네트워크 속도의 향상으로 인해, 사용자는 웹 애플리케이션에 대한 요구가 점점 높아지고 있습니다. 웹 애플리케이션이 제공해야 할 기능이 점점 많아지면서, 자원 파일은 점점 더 커지고 있습니다. 점점 더 큰 클라이언트 코드를 유지하기 위해 모듈화의 개념이 제안되었습니다. webpack은 모듈화 패키지 도구로, react의 인기와 함께 점점 더 인기가 있습니다.

Vue를 사용하여 프로젝트를 개발할 때, 단일 파일 컴포넌트 기능을 사용하려면 webpack이나 browserify를 사용하여 패키지를 만들어야 합니다. 대형 애플리케이션에서는 로드 속도를 향상시키기 위해 webpack의 code split 기능을 사용하여 패키지를 분할할 수 있습니다. 작은 모듈을 생성하여 필요에 따라 로드하면 Vue 문서 및 vue-router 문서에서도 설명되어 있습니다：Async Components、Lazy Loading。

webpack의 code split은 webpack의 require.ensure 특수 문법이나 AMD 스타일의 callback을 사용할 수 있습니다.-require 문법, AMD 스타일의 callback-require 문법 예시 -

Async Component를 전역으로 등록하는 경우:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
Vue.component('async-webpack-example', myAsyncComponent)

Async Component를 지역으로 등록하는 경우, 단일 파일 컴포넌트에서 script 블록 내용:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
// Vue 인스턴스 옵션을 확장합니다. 다른 옵션은 생략합니다.
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

vue를 사용할 때-router에서, 다른 라우팅 아래의 컴포넌트를 동기적으로 로드하기 위해, 라우팅 맵핑에서 동일한 방식으로 라우팅 항목의 component 속성을 설정할 수 있습니다.

여기서 myAsyncComponent는 공장 함수로 정의되어 있으며, 필요할 때 Vue나 vue로 로드됩니다.-router가 정의한 컴포넌트 옵션을 파싱하는 resolve 컬백 함수(네, Vue와 vue에서는)-router에서는 두 가지 다른 컴포넌트 옵션을 분석하는 함수가 있습니다)-require 함수(옵션을 받는 컴포넌트의 리소스를 리소스로 받는 resolve 커리어의 파라미터는 컴포넌트 옵션입니다)，이렇게 하면打包 스크립트를 실행할 때 my-async-component.vue 파일은 단일 파일로打包되고, 해당 컴포넌트가 사용될 때만 로드됩니다。

비동기 로드가 요구되는 컴포넌트가 많을 때, 더 많은 단일 파일이 생성됩니다. 프론트엔드 성능에 대해 볼 때, 각 파일이 더 작아지긴 하지만, 더 많은 네트워크 연결이 설정되고 해제되는 비용이 발생할 수 있으므로, 프론트엔드 최적화의 실천에서는 일반적으로 파일 수와 단일 파일 크기 간의 균형을 찾아야 합니다。

이 글에서는 여러 컴포넌트를 하나의 파일로 결합打包하는 방법을 설명합니다. 한편으로는 코드 블록의 수를 줄일 수 있으며, 이러한 결합打包된 컴포넌트가 다른 곳에서 여러 번 사용될 때, Vue의 캐시 메커니즘 덕분에 후속 컴포넌트의 로드 속도를 빠르게 할 수 있습니다. 또한, 이러한 일반 컴포넌트가 장기적으로 변경되지 않는 경우 (예: UI 관련 컴포넌트),打包된 파일도 장기적으로 변경되지 않아, 브라우저의 캐시 기능을 최대한 활용하여 프론트엔드 로드 속도 최적화를 실현할 수 있습니다。

먼저 효과 이미지를 보여드리겠습니다. vue-router의 SPA 애플리케이션에서 루트 라우팅을 제외한 라우팅 항목에 대해 ComponentA, ComponentB, ComponentC 등 세 개의 컴포넌트를 결합하여 하나의 파일로打包합니다. 페이지를 처음 로드할 때, 개발자 도구의 네트워크 패널에서 ComponentA, ComponentB, ComponentC 이 세 개의 컴포넌트를 포함한 0.a 파일이 로드되지 않았음을 볼 수 있습니다。5a1bae6addad442ac82.js 파일이 있으며, Page A 링크를 클릭할 때 파일이 로드되고, Page B, Page C 링크를 클릭할 때 파일이 다시 로드되지 않습니다。

우선 vue-cli 명령 프롬프트 도구가 webpack 프로젝트 템플릿을 사용하여 vue-router의 프로젝트에서 src/components 디렉토리 아래에서 CommonComponents 디렉토리를 생성하고, 그 안에서 ComponentA, ComponentB, ComponentC 이 세 개의 컴포넌트를 생성합니다。

동시에 CommonComponents 디렉토리 아래에서 index.js를 생성하고, 그 내용은 다음과 같습니다：

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./
exports.ComponentC = require('.'),/ComponentC')

这样，我们只需要使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法异步加载 CommonComponents 目录下的 index.js，在使用 webpack 进行打包时，就可以实现将 ComponentA、ComponentB、ComponentC 这三个组件合并打包。以 AMD 风格的 callback-require 语法为例示范如下，这里的 callback 回调函数的形式没有任何特殊要求。

require(['component/CommonComponents
 // do whatever you want with CommonComponents
})

component/CommonComponents 模块加载成功时，这里的回调函数中的 CommonComponents 参数将会是一个包含 ComponentA、ComponentB、ComponentC 这三个组件选项的对象。

在定义异步解析组件时，我们使用的是一个工厂函数 resolve => {require(['./my-async-component'], resolve)}，如果需要在路由配置文件中添加 component 属性为 ComponentA 组件的路由项，应该定义什么样的工厂函数呢？记住这里的 resolve 是一个用于解析组件选项的回调函数，其参数是所获取的组件选项，而上一段代码中的 CommonComponents 恰好是包含若干个组件选项的对象，因此我们可以将 CommonComponents 的子属性作为参数用于 resolve 调用，我们编写一个函数 getCommonComponent，用于根据组件名称返回获取相应的组件选项的工厂函数。

let getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))

컴포넌트 템플릿이나 라우팅 맵핑 등에서 특정 컴포넌트를 사용하는 경우 getCommonComponent('ComponentA')와 같은 함수 호출을 사용하여 컴포넌트 설정을 할 수 있습니다. 라우팅 맵핑에서의 사용 예시는 다음과 같습니다.

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

결국 생성된 파일 목록은 다음과 같으며, 0.a5a1bae6addad442ac82.js는 ComponentA, ComponentB, ComponentC 이 세 개의 컴포넌트를 포함하고 있습니다.

결론

이것이 이 문서의 모든 내용입니다. 이 문서의 내용이 여러분의 학습이나 업무에 도움이 되길 바랍니다. 궁금한 점이 있으시면 댓글을 통해 교류해 주세요. 감사합니다.呐喊 튜토리얼에 대한 여러분의 지지에 감사합니다.

고지사항: 본 문서의 내용은 인터넷에서 수집되었으며, 저작권자는 모두 해당 합니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 본 사이트는 저작권을 소유하고 있지 않으며, 인공 편집되지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 문제가 있을 경우 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 (메일 작성 시 #을 @으로 변경하시오) 신고를 하시고 관련 증거를 제공하시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제하겠습니다.