Vue 路由&组件懒加载（按需加载）

当打包构建应用时，Javascript 包会变得非常大，影响页面加载速度。使用Vue路由懒加载和组件懒加载可以提升页面加载速度，减少白屏时间，提升用户体验。

用法有如下三种：（路由懒加载与组件懒加载用法相同）

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增加一行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
　　　　}

　　] })