框架篇-Vue面试题5-怎么提高首屏渲染以及性能优化

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

每逢面试,首屏渲染性能优化是一个常见的话题,下面就自己知道的,记录一下

分析打包出来的文件

安装webpack-bundle-analyzer这个插件,然后使用npm run build --report输出项目打包情况,直观的比较哪个bundle文件的大小,有针对性的进行模块化拆分

路由懒加载

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

import ShowBlogs from '@/components/ShowBlogs';

routes: [(path: 'Blogs'), (name: 'ShowBlogs'), (component: ShowBlogs)];

经过路由懒加载更改为,如下方式

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

如果是在 vuecli 3中，我们还需要多做一步工作 因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了

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

// vue.config.js
module.expo