vue首屏优化（新手理解）

Posted 2021-04-16 前端小白修仙记

1.图片的压缩

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

2.路由懒加载

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

3.element-ui按需加载

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

4.关闭sourcemap

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

找到文件config/index.js中，如下图：

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

优化前：

优化后：