Vue의 주문형 로딩이란 무엇입니까?

vue에서는 주문형 로딩을 지연 로딩 또는 지연 로딩이라고도 하는데, 이는 필요에 따라 리소스를 로딩하는 것을 의미합니다. vue 프로젝트에서 주문형 로딩을 구현하는 방법에는 세 가지가 있습니다. vue 비동기 구성 요소 기술, es가 제안한 import() , webpack "require.ensure()"에서 제공됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

지연 로딩 또는 지연 로딩이라고도 하는 주문형 로딩은 필요에 따라 리소스를 로드하고 리소스가 사용될 때만 로드됩니다.

온디맨드 로드가 필요한 이유

인터넷이 발달하면서 웹 페이지는 점점 더 많은 기능을 수행해야 합니다. 단일 페이지 애플리케이션을 프런트 엔드 아키텍처로 사용하는 웹 사이트의 경우 많은 기능이 하나의 HTML에 집중되어 있기 때문에 웹 페이지에 로드해야 하는 많은 양의 코드 문제에 직면하게 됩니다. 이로 인해 웹 페이지 로딩 속도가 느려지고 상호 작용이 중단되며 사용자 경험이 매우 저하됩니다.

이 문제의 근본 원인은 모든 기능에 해당하는 코드가 한 번에 로드되지만 실제로는 각 단계에서 사용자가 일부 기능만 사용할 수 있다는 것입니다. 따라서 위의 문제를 해결하는 방법은 현재 사용자에게 필요한 기능에 해당하는 코드만 로드하는 것, 이른바 온디맨드 로딩이다.

Vue 프로젝트에 대한 온디맨드 로딩 구현 방법

vue 프로젝트에 대한 온디맨드 로딩 구현 방법 3가지: vue 비동기 구성 요소 기술, es 제안의 import(), webpack에서 제공하는 require.ensure()

vue 비동기 구성 요소 기술

vue-router는 라우팅을 구성하고 vue의 비동기 구성 요소 기술을 사용하여 주문형 로딩을 달성합니다. 이런 식으로 다음 구성 요소는 js 파일을 생성합니다

사용 사례:

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require(['../components/PromiseDemo'], resolve)
}

es 제안된 import()(권장)

webpack 공식 문서: webpack에서 import() 사용

vue 공식 문서 : 경로의 지연 로딩(import() 사용)

사용 사례:

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})

require.ensure()

vue-router webpack에서 제공 라우팅 구성, webpack의 require.ensure 기술 사용, on- 요구 로딩.

이 경우 동일한 ChunkName을 지정하는 여러 경로가 병합되어 하나의 js 파일로 패키징됩니다.

예제는 다음과 같습니다:

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
    path: '/hello',
    name: 'Hello',
    // component: Hello
    component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}

[관련 권장 사항: vue.js tutorial]

위 내용은 Vue의 주문형 로딩이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!