网站建设新技巧：懒加载+压缩合并，速度飞快

搞网站建设真让人头大，一堆图片处理起来好费劲。颜色杂七杂八的晃眼，结果网站变得卡得像蜗牛，用户当然用不爽。别急，其实只要搞定图片加载和缓存这两步，就能提升网站速度！

一、懒加载技术

留点时间给它，就像是慢慢等一位老爷爷慢慢下班回家那样。首次刷网页快多了，不必急急忙忙一次性加载。想用Vue实现这招儿的话，直接安个vue-lazyload插件即可。装完后，只需在启动Vue时加上几行简单代码就行。

想让 Vue 里的图慢慢冒出来?给 img 标签加个v-lazy,等有人跑到那个地方后，图就跳出来了~

二、压缩合并大法

npm install vue-lazyload --save

想让照片看起来更快？简单点说，就是瘦瘦身！利用TinyPNG或ImageOptim这些网上工具，把图片缩小一下，放心，效果没啥变化.最后别忘了换张新图片

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
new Vue({
  render: h => h(App),
}).$mount('#app')

别急就是把小图片拼成一个大图，再用CSS Sprite技术切分一下。这样既能省下不少网页请求，还能控制文件大小哦～

三、CDN加速与缓存策略

  

    
  


export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}

哎呦喂，用CDN太给力了！特别适合放那些不变的图片。只需要把图传遍各种服务器，访问的时候就会快得飞起哦～完事儿后，立马就能在Vue组件里随便用啦～

记住了没米怎么做饭？就像厨师手上少了调料，也做不出美味佳肴！举个栗子来说，咱们把缓存设定成一个月，下次再来逛这个网站的话，就能看到之前看过的那些美图！

四、响应式图片应运而生

“响应式图片”真赞！简单来说就是根据你手机屏幕大小选个最适合的图片，就算屏幕挺大也不怕图片太大。这既节省了手机内存又节省了流量，网页加载起来就更快~

只要用上srcset和sizes这俩神奇宝贝，图片就能自动适应各种手机屏幕了！

2.页面运行速度也能有所提高。

简单地讲，有了懒加载、压缩合并、CDN加速还有响应式处理这几个神器在手，把图片加载和缓存的问题搞定在vue中就是小事一桩！加载更快，用户体验更棒，对大家来说不过是动动手指头的事。