react.lazy 路由懒加载_「Vuejs」317- 提升90%加载速度——Vuecli下的首屏性能优化

作者：夜行风

链接：https://segmentfault.com/a/1190000019499007

前言

之前用 vuecli做了个博客，是一个单页面项目，大概有十个路由

直接 npm run build打包出来，有一个 1M的巨大 js文件

先挂载到服务器上试试

好家伙 这加载时间 仿佛过了半个世纪

首屏页面整整加载了 9s 光加载那个大文件就花了 8s

这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的

过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同

分析

vuecli 2.x自带了分析工具

只要运行 npm run build --report

如果是 vuecli 3的话，先安装插件

cnpm intall webpack-bundle-analyzer –save-dev

然后在 vue.config.js中对 webpack进行配置

chainWebpack: (config) => {

/* 添加分析工具*/

if (process.env.NODE_ENV === 'production') {

if (process.env.npm_config_report) {

config

.plugin('webpack-bundle-analyzer')

.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

.end();

config.plugins.delete('prefetch')

}

} }

再运行 npm run build --report

会在浏览器打开一个项目打包的情况图，便于直观地比较各个 bundle文件的大小

可以看到 项目中所有的依赖，所有的路由，都被打包进了同一个文件中

另外，在浏览器中，也可以通过 converge来查看代码的使用状况

红色的是下载了但未使用的部分

路由懒加载

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

在一开始就下载完所有路由对应的组件文件，这明显是不合适的，这就像下载一个 app了，所以我们就需要使用路由懒加载

在 router.js文件中，原来的静态引用方式

import ShowBlogs from '@/components/ShowBlogs'routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]

改为

 routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')

以函数的形式动态引入，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会下载路由组件

首屏需要加载的文件变成了橙色的部分，被小弟们分流出去了 300k

如果是在 vuecli 3中，我们还需要多做一步工作

因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容

在首屏会把这十几个路由文件，都一口气下载了

所以我们要关闭这个功能，在 vue.config.js中设置

参考官网的做法：

设置完毕后，首屏就只会加载当前页面路由的组件了

element-ui按需加载

首屏需要加载的依赖包，其中 element-ui整整占了 568k

原本的引进方式引进了整个包：

import ElementUI from 'element-ui'Vue.use(ElementUI)

但实际上我用到的组件只有按钮，分页，表格，输入与警告

所以我们要按需引用：

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';Vue.use(Button)Vue.use(Input)Vue.use(Pagination)Vue.prototype.$alert = MessageBox.alert

注意 MessageBox注册方法的区别，并且我们虽然用到了 alert，但并不需要引入 Alert组件

在 .babelrc文件中添加( vue-cli 3要先安装 babel-plugin-component)：

plugins: [ [ "component