图片优化
图片大小优化, 部分图片使用 webP(需要考虑 webp 兼容性)
在线生成, 如智图, 又拍云
gulp 生成, gulp-webp 或 gulp-imageisux
canvas 生成
可以参考 juejin.im/post/5ad043...
减少图片请求, 使用雪碧图
在线生成: sprites Generator, 腾讯的 gopng,spriteme
代码生成: gulp.spritesmith 或者 sass 的 compass
页面性能优化
图片或组件懒加载
使用 vue-lazyload 组件或其他一些组件
vue-lazyload 地址: https://www.npmjs.com/package/vue-lazyload
图片懒加载: 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>
组件懒加载
- 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 组件时, 同时组件是通过服务端数据渲染时, 会出现多个组件先重合后分离的状况
三种方案
当页面展示的版块是固定的时候且内容高度不易变动时候, 可以预先在组件外设置一个固定高度, 显示的时候就像在一个框架里添加内容. 当页面内容不固定时候, 为了减少异步加载时组件重合的问题, 可以在首屏在某组件数据加载完成时候设置其他组件显示, 通过 v-show 显示.
当页面整体固定时, 可以为页面增加一个骨架, 这样防止页面闪烁的情况
具体实施可以参照 https://segmentfault.com/a/1190000012403177
服务端渲染页面, 对于一些页面数据固定, 更改较少的, 可以考虑通过服务端渲染, 会在短时间将页面显示出来, 有比较好的用户体验.
减少引入外部文件大小
项目引入部分 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 缓存页面, 下次打开页面时候不需要重新加载, 显示更快
请求优化
服务器对图片缓存
设置请求缓存, 设置 cache-control
开启 Gzip, 压缩响应信息, 使传输快
设置 DNS 缓存
使用 HTTP2.0
来源: https://juejin.im/post/5ae2cb0ef265da0b767d32a0