项目中的静态图片一般有两种使用方式：HTML中的![]()
标签，CSS中的background-image属性，尽量使用CSS来加载图片，当然，如果依赖图片本身的纵横比缩放功能，还是使用HTML的方式。框架本文将以一个使用vue-cli3.0脚手架搭建的项目为例。我们选择的转换工具是Imagemin，版本是6.1.0，因为7.0.0以后的版本和windows有兼容性问题，目前还没有修复。npminstallimagemin@6.1.0--save-devnpminstallimagemin-webp--save-devconversionscript我们的转换脚本需要支持三种模式：全量转换、单目录转换、单文件转换。默认质量为75，实际测试后发现75的质量和100的质量基本没有区别，下面是脚本代码的实现：/***脚本位于tools中目录，即./tools/webp.js*项目源码位于src目录，即./src/*代码中部分目录配置可自行调整*/constimageMin=require('imagemin')constimageMinWebp=require('imagemin-webp')constpath=require('path')constfs=require('fs')letquality=75letrootDir=path.join(__dirname,'../src')asyncfunctioninit(dir){console.log('start!')awaitloop(dir)console.log('completed!')}asyncfunctionloop(dir){letres=fs.readdirSync(dir,{withFileTypes:true})awaitimageMin([path.join(dir,'*.{jpg,png}')],dir,{插件:[imageMinWebp({quality:quality})]})console.log(dir)for(leti=0,length=res.length;i=3){if(process.argv[3]){quality=process.argv[3]}letdir=path.join(__dirname,'../',process.argv[2])conststats=fs.statSync(dir)if(stats.isDirectory()){rootDir=dirinit(rootDir)}elseif(stats.isFile()){console.log('start!')imageMin([dir],path.dirname(dir),{插件：[imageMinWebp({quality:quality})]})console.log(dir)console.log('completed!')}}else{init(rootDir)}转换所有图像：node./tools/webp.jsconvertsrc/components目录下的所有图片:node./tools/webp.jssrc/components转换单个图片文件src/images/picture.png:node./tools/webp.jssrc/images/picture.png转换所有图片,并设置转换质量为100:node./tools/webp.jssrc100查看是否支持https://modernizr.com/downloa...打开上面的链接，点击BUILD，就可以下载了。引入方式有两种：Es6Module：通过import引入InlinePush（内联脚本）：通过将代码放在标签引入Es6Module，适用于纯前端渲染架构，如Vue、React,Angular等。这种架构是在JS之前执行的，页面上没有图片内容，所以不需要考虑FOUC（FlashofUnstyledContent）的情况。InlinePush（内联脚本）适用于后端渲染架构，如PHP、Nodejs等。在这种架构下，页面上可能已经有图片了，所以InlineScript必须放在和
