vue项目能够从哪些方面进行优化

图片优化

1. 图片大小优化，部分图片使用WebP（须要考虑webp兼容性）

   • 在线生成，如智图、又拍云
   • gulp生成，gulp-webp或gulp-imageisux
   • canvas生成

   能够参考juejin.im/post/5ad043…

2. 减小图片请求，使用雪碧图

   • 在线生成：sprites Generator、腾讯的gopng、spriteme
   • 代码生成：gulp.spritesmith或者sass的compass

页面性能优化

图片或组件懒加载

使用vue-lazyload组件或其余一些组件

vue-lazyload地址：www.npmjs.com/package/vue…

1. 图片懒加载：v-lazy或使用v-lazy-container包含一个图片组

// 引入一张图片 
<img v-lazy="//domain.com/img1.jpg">  
// 引入一组图片
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
复制代码

2. 组件懒加载

Vue.use(VueLazyload, {
  lazyComponent: true
});
<lazy-component>
  <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>
复制代码

图片预加载

快速显示图片

使用场景：在某个查看图片的组件，当不断翻看下一页的图片时，从服务端获取数据再展现图片会出现图片缓慢加载的状况，此时能够在展现新数据时候先预加载图片，图片加载完以后在，将图片填充到对应位置

三方插件懒加载（按需加载）

js文件通常是同步加载的，放在页面内会阻塞主要js文件加载。

使用场景：有的项目必须引入jquery等文件时，在组件内部引入这些文件必定程度会阻塞页面渲染，于是经过特定事件（点击或者弹窗）动态加载jquery等JS文件，可使主页面快速显示出来。

异步加载页面，如何让组件之间不重合

加载多个vue组件时，同时组件是经过服务端数据渲染时，会出现多个组件先重合后分离的情况

三种方案

1. 当页面展现的版块是固定的时候且内容高度不易变更时候，能够预先在组件外设置一个固定高度，显示的时候就像在一个框架里添加内容。当页面内容不固定时候，为了减小异步加载时组件重合的问题，能够在首屏在某组件数据加载完成时候设置其余组件显示，经过v-show显示。

2. 当页面总体固定时，能够为页面增长一个骨架，这样防止页面闪烁的状况

   具体实施能够参照segmentfault.com/a/119000001…

3. 服务端渲染页面,对于一些页面数据固定、更改较少的，能够考虑经过服务端渲染，会在短期将页面显示出来，有比较好的用户体验。

减小引入外部文件大小

项目引入部分ElementUI内容时，经过引入babel-plugin-component配置.babelrc文件，这样便可引入部分组件，从而减小组件的大小。

路由懒加载

但使用到vue-router时，webpack会将全部组件打包在一个js文件中，这样就致使这个文件很是大，从而会影响首页的加载，最好的方法就是将其余路由分别打包到不一样js文件中，切换路由时再加载对应js文件。

resolve => require([URL], resolve), 支持性好
() => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用
() => import(URL), webpack2官网推荐使用, 属于es7范畴, 须要配合babel的syntax-dynamic-import插件使用
复制代码

路由页面缓存

使用vue-router的keep-alive 缓存页面，下次打开页面时候不须要从新加载，显示更快

请求优化

1. 服务器对图片缓存
2. 设置请求缓存，设置cache-control
3. 开启Gzip,压缩响应信息，使传输快
4. 设置DNS缓存
5. 使用HTTP2.0