Vue에서 경로의 지연 로딩이란 무엇입니까? 왜 하는가?

vue에서 경로 지연 로딩이란 무엇입니까? 왜 경로를 지연 로드해야 합니까? 다음 기사는 Vue의 경로 지연 로딩을 이해하는 데 도움이 되기를 바랍니다.

라우트 지연 로딩

지연 로딩의 본질은 지연 로딩 또는 주문형 로딩, 즉 필요할 때 로딩하는 것입니다.
홈페이지에서 지연 로딩을 설정할 필요가 없습니다. 페이지가 로드된 후 다시 방문하면 다시 로드되지 않습니다.

경로의 지연 로딩이 필요한 이유

• 애플리케이션을 패키징하고 빌드할 때 패키징된 코드 로직 구현 패키지가 매우 클 수 있습니다. 사용자가 사용하려고 하면 모든 리소스가 요청됩니다.

• 다른 경로에 해당하는 구성 요소를 별도로 패키징하고 해당 경로에 액세스할 때 로드하면 더 효율적입니다. [관련 권장사항: vuejs 비디오 튜토리얼, web front-end development]

라우팅 지연 로딩이 하는 일

• 라우트에 해당하는 컴포넌트를 해당 js 패키지에 로드합니다.

• 해당 컴포넌트는 경로에 접근할 때만 로드됩니다.

vue 비동기식 구성 요소

구문: 구성 요소: 해결=>(require(['로드해야 하는 경로의 주소']), 해결) component：resolve=>(require(['需要加载的路由的地址'])，resolve)

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: resolve=>(require(["/@/views/404.vue"],resolve))
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

ES import 常用

用户访问组件时，该箭头函数被执行
webpack：import动态导入语法能将该文件单独打包
语法：const xxx = （）=>import('需要加载的模块地址')

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

ES import가 흔히 사용됩니다

🎜사용자가 컴포넌트에 접근하면 화살표 기능이 실행됩니다🎜 webpack: import 동적 가져오기 구문으로 파일을 별도로 패키징할 수 있습니다🎜 구문: const xxx = () =>import('로드해야 할 모듈의 주소')🎜rrreee🎜 (학습 영상 공유: 🎜vuejs 입문 튜토리얼🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vue에서 경로의 지연 로딩이란 무엇입니까? 왜 하는가?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!