Vue、Nuxt中的页面性能优化方案

其实我做项目最有感触的一点就是：不要等最后项目做出来之后老想着从技术角度去优化他，改善他，要从项目一开始设计的时候想的更长远一些去规避这些问题。

以下以谷歌浏览器为例：

一、首先你要学会看浏览器中的Network

里面的size和time分别对应了文件的大小和请求时间，从上面就可以看出来哪个文件耗费的资源比较庞大。我们可以对症下药。

二、首先优化图片体积

在请求的时候我们发现，所用的png图片都是高清大图，一个放图片的文件夹体积占了整个项目的2/3，因此，我们需要把一些不需要超级清晰的图片缩小他的体积，所用软件：PS或者任意一款可以改图片大小的软件
以下以PS为例：

1. 文件夹中选择图片以PS的形式打开

   
   图片.png

2. 点击导出为

   
   图片.png
   

   这里可以清楚的看到你的图片体积的大小
   选择缩放一定比例即可，一般不重要的图片我都是缩放到10%，图片体积会减少很多很多
   切记，如果这样的话一定要设置图片的宽高，不然会变小的呀。

三、优化引入插件的体积

例如element-UI这类的ui组件完全可以按需引入来达到减小项目体积的效果。