Vueルーティング&コンポーネントリロード(オンデマンドロード)

構築アプリケーションをパッケージ化すると、Javascriptパッケージが非常に大きくなり、ページのロード速度に影響します.Vueルーティングの怠惰ロードとコンポーネントの怠惰ロードを使用すると、ページのロード速度を向上させ、白画面の時間を減少させ、ユーザー体験を向上させることができます.
使用法は以下の3種類あります:(ルーティング怠け者はコンポーネント怠け者と同じです)
1.Vue非同期コンポーネント技術

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
　　routes:[{
　　　　　　path:'/';
　　　　　　name:'home',
　　　　　　component:resolve=>(require(["@/components/Home"],resolve))
　　　　}]

})

 
2.ESが提案したimport()メソッド?この方法を推奨

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const Home = () => import("@/components/Home");
export default new Router({
　　routes:[
　　　　{
　　　　　　path:'/';
　　　　　　name:'home',
　　　　　　component:Home
　　　　}
　　]
})

コンポーネントをブロック化:
あるルーティングの下のすべてのコンポーネントを同じ非同期ブロック(chunk)にパッケージ化したい場合があります.chunkという名前の注釈構文を使用してchunk nameを提供するだけです(Webpack>2.4が必要です).

const Foo = () => import(/* webpackChunkName: 'group-foo' */ './Foo') 
const Bar = () => import(/* webpackChunkName: 'group-foo' */ './Bar') 
const Baz = () => import(/* webpackChunkName: 'group-foo' */ './Baz') 

  ：chunk name      (         )  webpack    chunk name,    [id]  ，           0.js,1.js……

上記の3行のコードは同じwebpackChunkNameを指定し、jsファイルにまとめてパッケージ化され、コンポーネントはグループごとにブロックされます.
同時にwebpackを手動で構成する必要があります.base.conf.js,output 1行chunkFilenameを追加

module.exports = {
  // JS       
  entry: {
    main: './main.js',
  },
  output: {
    //    entry        Chunk          
    filename: '[name].js',
    //        Chunk          
    chunkFilename: '[name].js',
  }
};

 3.Webpack公式推奨

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//r   resolve。      chunk name "group"，      js   ，    
const Home = r => require.ensure([],() => r(require("@/components/Home")),'group');  
const About = r => require.ensure([],() => r(require("@/components/About")),'group');

export default new Router({
　　routes:[
　　　　{
　　　　　　path:'/';
　　　　　　name:'home',
　　　　　　component:Home
　　　　},

　　　　{
　　　　　　path:'/about';
　　　　　　name:'about',
　　　　　　component:About
　　　　}

　　] })

 
転載先:https://www.cnblogs.com/AIonTheRoad/p/11165288.html