vue에서 요청 시 경로 로딩(경로 지연 로딩)을 구현하는 3가지 방법

왜 지연 로딩이 필요한가요?

vue와 같은 단일 페이지 애플리케이션의 경우 애플리케이션 지연 로딩이 없으면 webpack으로 패키징된 파일이 비정상적으로 커져서 홈페이지에 들어갈 때 로드할 내용이 너무 많아지고 시간도 너무 많이 걸리게 됩니다. 첫째, 장기간의 흰색 화면은 로딩이 완료되어도 사용자 경험에 도움이 되지 않습니다. 홈페이지 로딩 시간 [ 관련 권장사항: vue.js 비디오 튜토리얼]

• vue 비동기 컴포넌트

• es가 제안한 import()

• webpack의 require()

1. vue 비동기 컴포넌트 기술 ==== 비동기 로딩

vue-router는 라우팅을 구성하고 vue의 비동기 컴포넌트 기술을 사용하여 온디맨드 로딩을 ​​달성합니다.
그러나 이 경우 컴포넌트는 js 파일을 생성합니다

/* vue asynchronous. 구성 요소 기술* /

{ 경로: '/home', 이름: 'home', comComponent: 해결 => require(['@/comComponents/home'],resolve) },

{ 경로 : '/ index', 이름: 'Index', 구성 요소: 해결 => require(['@/comComponents/index'],resolve) },

{ 경로: '/about', 이름: 'about', 구성 요소 : 해결 > (가져오기 사용)

const 组件名=() => import('组件路径');
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

{ path: '/about', component: About }, { path: '/index', component: Index }, { path: '/home', component: Home }

3. webpack에서 제공하는 require.ensure() vue-router는 라우팅을 구성하고 webpack의 require.ensure 기술을 사용하여 온디맨드 로딩도 구현합니다.

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

아아아아

위 내용은 vue에서 요청 시 경로 로딩(경로 지연 로딩)을 구현하는 3가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!