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

最新推荐文章于 2024-05-15 20:30:00 发布

itclanCoder

最新推荐文章于 2024-05-15 20:30:00 发布

阅读量888

点赞数

文章标签： vue java javascript js css

本文链接：https://blog.csdn.net/wzc_coder/article/details/109127418

版权

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

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

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

点击左上方,可关注本刊

标星公众号（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(预先加载模块)，提前获取用户

关注