vue路由懒加载

转载

mb5fed71eeb026e 2020-06-18 09:21:00

最新版的vue-cli + webpack构建的vue项目在结构上有了一些变化。比如build文件夹下的dev-server.js文件消失了等，当然细心点同学可能会在package.json文件中发现webpack-bundle-analyzer的身影，它的作用是分析项目打包后的各个资源的体积。

我们运行打包命令就知道它的功能了：

npm run build

结果如下图（PS：config/index.js文件 => productionSourceMap: false）：

vue路由懒加载_库文件

打包后各个文件的大小

运行以下命令，即可查看可视化界面：

npm run build --report

1.路由懒加载

配合webpack支持的懒加载方法有：

这种方法比较通用，而且支持性好

resolve => require([./Foo], resolve)

这种写法是官方文档推荐的，如下：

const Foo = () => import('./Foo')

注意：如果使用的是 Babel，需要添加syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

接下来我以官方文档的写法为例，演示一波：

原来没有使用路由懒加载时，你的router/index.js可能是这样的：

import Vue from 'vue'
import Router from 'vue-router'

import Home from 'pages/home'
...

Vue.use(Router)

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

当时有了路由懒加载，世界变得不同了：

import Vue from 'vue'
import Router from 'vue-router'

// 其它都不用变，就是这么简单
const Home = () => import('./home')
...

Vue.use(Router)

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

设置路由懒加载后，我们再来看看打包的效果：

vue路由懒加载_ico_02

路由懒加载后

这时我们会看到，app.js这个文件几乎减小了一半，但是会多出几个js文件，那是我们的另外几个路由页面的js文件。这些文件会在我们需要的时候，通过异步的方式加载进来，因此它们不会为首屏的加载增加负担。

2.组件懒加载

既然路由可以懒加载，那么组件可否懒加载呢？

答案当然是可行的。

套路还是一样，使用：

const Foo = () => import('./Foo')

例如：

// 组件懒加载
const IconList = () => import('components/base/icon-list')

export default {
components: {
IconList
    }
}

那么组件懒加载之后，效果如何呢？见下图：

组件懒加载后

厉害了，app.js文件直接变成了1.83KB，此时又多出了几个js。

同上，这些js是自定义组件的js，我们可以用异步加载的方式加载进来的。

那么问题来了，难道用了懒加载真的可以为所欲为吗？就没有一点缺陷，答案当然是有的。

在实践中，通过懒加载，会遇到如下问题：

懒加载的元素将会延迟加载，这里的延迟指的是会出现滞后于其他同步元素的出现，甚至会出现页面闪一下的过程
如果一个页面中有许多嵌套的懒加载组件，那么网页中的元素会分先后渲染，层次不齐

因此，在平常的vue项目中，建议：

对于路由页面，最好进行懒加载；
对于路由页面中的各个组件实行按需进行懒加载。
如果组件不大并且使用不多，可直接在路由页面中导入，若组件较大或者使用比较频繁，建议使用组件懒加载。

3.各类组件库按需引入（如果有用到的话）

现如今，关于vue的组件库真是百花齐放，如mint-ui、element-ui、iview以及vux等...但是如果引入完整的组件库文件，那么打包后的css和js文件将会变得很大。拿mint-ui举个例子，引入完整的mint-ui和其css样式，打包后，如下图：

引入完整的mint-ui

那么，使用按需加载会怎么样呢？先上代码：

// main.js
// 按需加载
import { Spinner, Header, InfiniteScroll, Tabbar, TabItem, Lazyload } from 'mint-ui'

Vue.use(Lazyload)
Vue.use(InfiniteScroll)
Vue.component(Header.name, Header)
Vue.component(Spinner.name, Spinner)
Vue.component(Tabbar.name, Tabbar)
Vue.component(TabItem.name, TabItem)