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 　　　　} 　　] })

 

转载于:https://www.cnblogs.com/AIonTheRoad/p/11165288.html