Vue 라우팅의 지연 로딩을 구현하는 방법

이 글에서는 주로 Vue 라우팅의 지연 로딩 구현 방법을 소개하고 참고하겠습니다.

이 기사에서는 Vue 경로의 지연 로딩을 소개하고 모든 사람과 공유합니다. 세부 사항은 다음과 같습니다.

우리는 여러 경로에 해당하는 구성 요소를 여러 코드 블록으로 나눈 다음 경로가 있을 때 해당 구성 요소를 로드할 수 있습니다. 액세스했습니다.

1. 구성 요소는 화살표 함수일 수 있으며 동적 가져오기 구문을 사용하여 코드 청크 지점을 정의할 수 있습니다.

2. 네트워크에서 동적으로 로드된 구성 요소 이름을 보려면 webpackChunkName을 추가할 수 있습니다. 동시에 webpack.base.conf.js

3. code

// router里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'home',
   /* 
    * 使用动态组件，component可以是一个箭头函数
    * @表示src目录
    * 如果想在network里面看到动态加载的组件名字，可以加webpackChunkName，同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName
    * network里面动态加载模块名称
    */
   
   component: () => import(/* webpackChunkName: 'home' */'@/pages/Homes')
  
   
  },
  {
   path: '/todos',
   name: 'Todos',
   component: () => import(/* webpackChunkName: 'todo' */'@/pages/Todos')
  }
 ]
})

의 출력에서 ​​파일 이름 아래에 ChunkFileName을 추가하려면 위의 @는 현재 src 디렉터리를 나타냅니다. 자세한 내용은 다음을 참조하세요. webpack 구성

webpack.base.conf.js里面添加 chunkFilename: '[name].js'

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 // 需要配置的地方
 chunkFilename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
}

Analytics

라우팅 지연 로딩을 사용하여 home과 todos라는 두 개의 구성 요소를 생성했습니다. 구성 후 npm run dev를 실행하여 프로젝트를 실행하고 네트워크를 열고 새로 고칩니다. home.js가 로드된 것을 확인하면 이름이 위에서 정의한 webpackChunkName과 동일하고 todos를 클릭하면 todo.js가 로드됩니다. 이것은 경로의 지연 로딩을 간단하게 사용하는 것입니다.

Others

main.js의 프로젝트 항목에서 템플릿 구문을 사용하거나 렌더링 기능을 사용할 수 있습니다.

new Vue({
 el: '#app',
 router,
 components: { App },
 /*
 * 这里使用的template的语法
 * 也可以使用render函数,直接return一个html结构
 */
 // template: &#39;<App/>&#39;
 render() {

  return (
   <p>
    <App></App>
   </p>
  )
 } 
})

위는 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 되길 바랍니다.

관련 기사:

jQuery로 구현된 업로드된 이미지의 로컬 미리 보기 효과에 대한 간단한 예

JavaScript 인터뷰에 자주 나타나는 오류가 발생하기 쉬운 몇 가지 일반적인 지점

vue axios 요청 차단 예제 코드

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