1.vue异步组件技术----异步加载“
vue-router配置路由，使用vue异步组件技术，可以实现按需加载，但这种情况下组件只生成一个js文件
{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },
2.组件懒加载方案二 路由懒加载(使用import)
1.没有指定webpackChunkName,每个组件打包成一个js文件:import('@/components/Home')
2.指定了相同的webpackChunkName，会合并打包成一个js文件：import(/*webpackChunkName:'hh'*/'@/components/Home')
注*hh是取的名字，打包后只会有这一个js文件
3.直接在外面的暴露Home：path：'/',component:Home
3.webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') },
注：r就是resolve
因为
Vue
是SPA，所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源，造成网站首页打开速度变慢，降低用户体验。为了解决上面问题，我们需要对
Vue
实现组件懒加载。
本文将对懒加载的实现原理以及使用进行讲解。
整个网页默认是刚打开就去加载所有页面，
路由懒加载
就是只加载你当前点击的那个模块。
按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。
实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。
传统路由配置：
import
Vue
from '
vue
'
import
Vue
Router from '
vue
-router'
import
Login fro
使用() =>
import
();的方式导入组件
这样可以在进入当前路由的时候加载路由
如果不使用懒加载 会在第一次进入页面后 一次性加载所有路由 所以首屏加载会慢如果一个项目过大 大量的使用
路由懒加载
会导致页面的热更新过慢
推荐在开发环境下不使用懒加载 这样有利于开发的效率
在生产环境可以使用
路由懒加载
通过process.env.NODE_ENV可以访问到当前是什么环境
可以在utils文件夹下创建两个文件
util.
import
.
这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载，方法有三种：
vue
-router配置路由，使用
vue
的异步组件技术，可以实现按需加载。
但是，这种情况下一个组件生成一个js文件。 举例如下：
2. es6提案的
import
()
推荐使用这种方式(需要webpack > 2.4)
webpack官方文档：webpac
为什么需要懒加载？
像
vue
这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
vue
异步组件
es提案的
import
()
webpack的require,ensure()
1 .
vue
异步组件技术 ==== 异步加载
vue
-router配置.
Vue
-cli3
路由懒加载
是一种将
Vue
应用的路由分离成小型代码块的技术，以实现更快的加载速度和更好的用户体验。在
Vue
-cli3 中，使用
路由懒加载
需要借助webpack的动态导入技术。
在应用中使用
路由懒加载
，需要将路由组件按需导入，使其成为 webpack 动态导入的一个组成部分。这样在使用路由时，当需要加载某个路由时，浏览器只会加载该路由对应的组件，而不会将整个应用的代码一次性加载。
使用
Vue
-cli3进行
路由懒加载
，需要对路由组件进行分割处理，在相应的路由配置中加入
import
，如下所示：
const Foo = () =>
import
('./Foo.
vue
')
const Bar = () =>
import
('./Bar.
vue
')
Router({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
以上代码中的
import
函数用于实现路由组件的懒加载，只有当该路由被匹配时才会加载相应的组件。这种动态加载的方式大大减少了应用的首次加载时间，提高了应用的性能和用户体验。
总之，
Vue
-cli3
路由懒加载
有利于提高应用的性能和用户体验。只有在需要时才会加载相应的代码，而不是提前一次性加载整个应用。使用
import
函数以动态导入方式，实现路由组件的懒加载，进一步优化
Vue
应用的性能。
