虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(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
默认开启 prefe