Vue 라우팅의 지연 로딩을 구현하는 방법-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-05-30 17:50:12

원래의

3457명이 탐색했습니다.

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

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

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

구성 요소는 화살표 함수일 수 있으며 동적 가져오기 구문을 사용하여 코드 청크 지점을 정의할 수 있습니다.
네트워크에서 동적으로 로드된 구성 요소 이름을 보려면 webpackChunkName을 추가할 수 있습니다. 동시에 webpack.base.conf.js
code

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

로그인 후 복사

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

webpack.base.conf.js里面添加 chunkFilename: &#39;[name].js&#39;

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

로그인 후 복사

Analytics

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

Others

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

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

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

로그인 후 복사

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