前端页面性能优化：WEBP+VUE实践

最新推荐文章于 2024-08-30 15:09:15 发布

WEB前端含光

最新推荐文章于 2024-08-30 15:09:15 发布

阅读量1.8k

点赞数

分类专栏：前端面试前端项目前端基础

本文链接：https://blog.csdn.net/Arui_0/article/details/107767889

版权

本文介绍如何在Vue项目中利用webpack的imagemin-webp-webpack-plugin生成WEBP图片，并通过vue-lazyload实现前端性能优化。在不兼容WEBP的浏览器中，文章提供了解决方案确保图片正常显示。同时也提到了CSS中的background-image兼容性问题以及需要注意的图片大小优化事项。

摘要由CSDN通过智能技术生成

本文旨在如何快速在vue项目上切换全站图片，并针对不兼容的浏览器版本进行降级。

生成webp
对于目前大多数的项目来说，比较方便且合适的方式是集成webpack的loader或者plugin，在build的过程中生成webp。当然也可以预先在项目中预先准备好webp，比如说在UI给切图时，多提供一个webp格式。

目前已有很多loader和plugin来干这个事情，本文中使用的是 imagemin-webp-webpack-plugin ，配置很简单，样例如下:

import ImageminWebpWebpackPlugin from 'imagemin-webp-webpack-plugin'

...

plugins: [
  ...
  new ImageminWebpWebpackPlugin({
    config: [
      {
        test: /\.(jpe?g|png)/,
        options: {
          quality: 75
        }
      }
    ],
    overrideExtension: false
  })
]
复制代码

这边为了后面降级方便，所以overrideExtension设置为false，意思是image.png->image.png.webp

如果这时一切正常的话，你已经获得了一份原始图片和一份webp格式的图片了，如下图：

vue中应用
webp在项目中实际应用，