Vue 기술 개발에서 경로의 지연 로딩을 구현하는 방법-View.js-php.cn

Vue 기술 개발에서 경로의 지연 로딩을 구현하는 방법

WBOY

풀어 주다： 2023-10-08 21:12:37

원래의

681명이 탐색했습니다.

Vue 기술 개발에서 경로의 지연 로딩을 구현하는 방법

Vue 개발에서 경로의 지연 로딩은 애플리케이션 성능과 사용자 경험을 향상시키는 중요한 기술입니다. 경로의 지연 로딩을 통해 요청 시 애플리케이션의 각 라우팅 구성 요소를 로드할 수 있으므로 초기 로딩 시간이 줄어들고 애플리케이션의 응답 속도가 향상됩니다. 이 글에서는 Vue에서 경로의 지연 로딩을 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. 라우팅 지연 로딩이란?

라우팅 지연 로딩은 Vue 프로젝트에서 필요에 따라 라우팅 구성 요소를 로드하는 기술을 의미합니다. 기존 개발에서는 모든 구성 요소가 한 번에 로드됩니다. 애플리케이션의 크기가 커지면 초기 로딩 시간이 크게 늘어나 애플리케이션의 사용자 경험에 영향을 미칩니다. 경로의 지연 로딩은 라우팅 요구 사항에 따라 구성 요소를 나누고 필요할 때만 로드할 수 있습니다.

2. 경로의 지연 로딩을 구현하는 방법

다음은 경로의 지연 로딩을 구현하는 구체적인 단계별 방법입니다.

바벨 플러그인을 설치하세요

경로의 지연 로딩을 사용하기 전에, babel 플러그인 @babel /plugin-syntax-dynamic-import를 설치해야 합니다. 다음 명령을 통해 설치할 수 있습니다: @babel/plugin-syntax-dynamic-import。可以通过以下命令进行安装：

npm install --save-dev @babel/plugin-syntax-dynamic-import

로그인 후 복사

修改配置文件

找到项目根目录下的babel.config.js文件，将@babel/preset-env配置中的modules改为false，并添加插件@babel/plugin-syntax-dynamic-import，配置如下：

module.exports = {
  presets: [
    '@babel/preset-env'
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

로그인 후 복사

修改路由配置

在Vue的路由配置文件（一般是router/index.js）中，将原始的组件引入方式修改为懒加载的方式。下面是一个示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

로그인 후 복사

在上面的代码中，component属性的值改为箭头函数，并使用import(/* webpackChunkName: "name" */ '../path/to/component.vue')的语法来进行组件的按需加载。其中，name和path/to/component.vue是组件的名称和相对于router/index.jsrrreee

프로젝트 루트 디렉터리에서 babel.config.js 파일을 찾아 @babel /preset-env 구성의 모듈을 false로 변경하고 플러그인 @babel/plugin-syntax-dynamic을 추가합니다. -import , 구성은 다음과 같습니다:

라우팅 구성 수정

router/index.js)에 도입합니다.

rrreee

comment

import(/* webpackChunkName: "name" */ '.. / path/to/comComponent.vue')

name

path/to/comComponent.vue

router/index.js

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