vlambda博客
学习文章列表

vue首屏优化(新手理解)

1.图片的压缩

   打开network一看,很多图片都在1M以上,大大的延长了加载时间,所以使用了图片压缩工具,效果显著。推荐网站:https://tinypng.com/


2.路由懒加载

   懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载,路由组件如果不按需加载的话,就会把所有的组件一次性打包到app.js中,导致首次加载内容过多

vue首屏优化(新手理解)

3.element-ui按需加载

   原本的引进方式引进了整个包:但实际上我用到的组件只有按钮,分页,表格,输入与警告,所以我们要按需引用

4.关闭sourcemap

   sourcemap是为了方便线上调试用的,因为线上代码都是压缩过的,导致调试极为不便,而有了sourcemap,就等于加了个索引字典,出了问题可以定位到源代码的位置。但是,这个玩意是每个js都带一个sourcemap,有时sourcemap会很大,拖累了整个项目加载速度,为了节省加载时间,我们将其关闭掉。

找到文件config/index.js中,如下图:

vue首屏优化(新手理解)


暂时我就只能做到这里了,我再放一下优化前后对比图!

优化前:

优化后: