# rollup-plugin-2webp

**Repository Path**: hola/rollup-plugin-2webp

## Basic Information

- **Project Name**: rollup-plugin-2webp
- **Description**: 基于rollup的构建插件，实现在构建阶段将png/jpg转成webp格式图片，并自动替换bundle产物中的引用，支持自主控制脚本插入。
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-12
- **Last Updated**: 2024-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rollup-plugin-2webp

> 基于rollup的构建插件，实现在构建阶段将png/jpg转成webp格式图片，并自动替换bundle产物中的引用，支持自主控制脚本插入。

## 安装

```bash
// npm
npm install git+https://gitee.web.guosen.com.cn/16104/rollup-plugin-2webp.git

// yarn
yarn add https://gitee.web.guosen.com.cn/16104/rollup-plugin-2webp.git

// pnpm 
pnpm add git+https://gitee.web.guosen.com.cn/16104/rollup-plugin-2webp.git
```

## 引用

```node
import towebp from "rollup-plugin-2webp"

// rollup.config.js
export default {
    input: 'src/main.js',
    output: ...
    plugins: [
        towebp()
    ]
    ...
}

// vite.config.js
export default defineConfig(({command, code})=>{
    return {
        ...
        plugins: [
            towebp()
        ]
    }
})
```

## 构建说明

> 构建过程中自动根据`assets`及`exclude`配置扫描目录并生成webp图片，并根据图片文件生成对应的css变量名称及js变量名称。<br/>

> css变量名称规则是将构建后的文件名中非数字/英文的字符用-替换，去除文件后缀，并在前面添加--，如构建的文件```fileName```是```assets/idcard_example_1@2x.ddd2a274.png```，对应的css变量是```--assets-idcard-example-1-2x-ddd2a274```，对应的webp文件名是```assets/icon-upload.86318ba1.png.webp```<br/>

> js变量名称规则是将构建后的文件名中非数字/英文的字符用_替换，去除文件后缀，并在前面添加```WEBP_```，如构建的文件```fileName```是```assets/idcard_example_1@2x.ddd2a274.png```，对应的js变量是```WEBP_ASSETS_IDCARD_EXAMPLE_1_2X_DDD2A274```，对应的webp文件名是```assets/icon-upload.86318ba1.png.webp```

>替换引用时自动使用较小的图片文件。

> **<font color=Red>由于项目构建输出存在复杂性，变量可能没法替换成功，如果确认属此类情况，建议关闭变量替换，由开发者自行处理图片引用（可参考<a href="#开发中可采用的方案">开发中可采用的方案</a>）或者使用服务端根据webp支持特性分流方案。</font>**


### 1.注入脚本1样例

> 判断是否支持webp

1. 异步模式
```html
<script type="text/javascript">
function isSupportWebp(callback) {
    try{
        if(localStorage.SUPPORT_WEBP == 1) return callback(true);
        if(localStorage.SUPPORT_WEBP == 2) return callback(false);
        var img = new Image();
        img.onload = function () {
            var result = (img.width > 0) && (img.height > 0);
            localStorage.SUPPORT_WEBP = result? 1:2;
            callback(result)
        };
        img.onerror = () => {
            localStorage.SUPPORT_WEBP = 2
            callback(false);
        };
        img.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
    }catch(e){
        callback(false)
    }                
}
isSupportWebp(function(r){
    if(r) {
        document.querySelector("body").setAttribute("data-webp",1);
    }
})
</script>

```

2. 同步模式
```html
<script type="text/javascript">
function isSupportWebp(callback) {
    try{
        if(localStorage.SUPPORT_WEBP == 1) return callback(true);
        if(localStorage.SUPPORT_WEBP == 2) return callback(false);
        var result = document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
        localStorage.SUPPORT_WEBP = result? 1:2;
        callback(result)
    }catch(e){
        callback(false)
    }                
}
isSupportWebp(function(r){
    if(r) {
        document.querySelector("body").setAttribute("data-webp",1);
    }
})
</script>

```


### 2.注入脚本2样例

> css变量定义

```html
<style type="text/css">
:root{
    --assets-idcard-example-1-2x-ddd2a274:"/h5open3-jd/dist/assets/idcard_example_1@2x.ddd2a274.png";
}
body[data-webp]{
    --assets-icon-upload-86318ba1:"/h5open3-jd/dist/assets/icon-upload.86318ba1.png.webp";
}
</style>
```

### 3.注入脚本3样例

> js引用图片变量定义

```html
<script type="text/javascript">
isSupportWebp(function(r){
    window.webp = {
        WEBP_ASSETS_IDCARD_EXAMPLE_1_2X_DDD2A274:supportWebp? "/h5open3-jd/dist/assets/idcard_example_1@2x.ddd2a274.png.webp":"/h5open3-jd/dist/assets/idcard_example_1@2x.ddd2a274.png",
    }
})
</script>
```

> 构建过程中插件在transformIndexHtml hook中默认将以上三段脚本插入到```<body>```后。

## 插件配置项

```javascript
// 需要转webp的图片格式
imageTypes: ['.png', '.jpg', 'jpeg'],
// 转成webp的质量系数
quality: 80,
// 图片资源所在目录
assets: 'src/assets',
// 排除目录
exclude: [],
// css引用处理方案，false-不处理， true/function-将根据是否支持webp图片为图片定义css变量，并将css文件中的图片地址替换成对应的css变量
// 支持function，接口定义：genCssVar(cssObject, webpCssObject) => string
genCssVar: true,
// js引用处理方案，false-不处理， true/function-将根据是否支持webp图片为图片定义js变量，并将js文件中的图片地址替换成对应的js变量
// 支持function，接口定义：genJsVar(jsObject, webpjsObject) => string
genJsVar: true,
// 脚本插入位置
injectPos: '<body>',
// 插件插入接口，如果配置此参数且为function，将忽略genCssVar，genJsVar，injectPos，脚本插件由开发者通过inject控制
// 接口定义：inject(html, {cssObject:cssObject, webpCssObject: webpCssObject, jsObject: jsObject, webpJsObject: webpJsObject}) => html
inject: '',
// vite的base，默认为空
baseUrl: '',
// 是否使用同步模式校验webp支持特性，true - 同步模式，false - 异步
syncCheckWebpSupport: true,
```

### 示例

```javascript
plugins: [
    towebp({
        // 只转换png图片
        imageTypes: ['.png']
        inject: function(html, objs) {
            // 什么都不处理，直接返回原html(不会注入脚本)
            return html
        }
    })
]
```

## 开发中可采用的方案

### 采用```<picture>```标签
```html
<!--标签会根据浏览器支持情况加载对应资源-->
<picture>
    <source srcset="./webp/demo.webp" type="image/webp">
    <img src="./images/demo.png"/>
</picture>

```

### css方案

> 通过 js 检测当前浏览器是否支持 WebP 格式的图片（细节见下文 js 代码），在 html 标签上动态添加类名 webp/no-webp，根据浏览器支持情况加载不同格式的图片。

```css

.box {
    width: 5.73rem;
    height: 6.57rem;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.no-webp .box {
    background-image: url(../images/demo.png);
}

.webp .box {
    background-image: url(../webp/demo.webp)
}

/*或者使用css var*/

:root {
    --demo-img: url(../images/demo.png)
}

:root .no-webp {
    --demo-img: url(../images/demo.webp)
}

.box {
    width: 5.73rem;
    height: 6.57rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: var(--demo-img)
}

```

### nginx分流方案

```conf

http {
  map $http_accept $_webp {
    ~image/webp           .webp;
    default               '';
  }
  server {
    location ~* \.(jpg|jpeg|png)$ {
      add_header  Vary  Accept;
      try_files   $uri$_webp  $uri  =404;
    }
  }
}


```

> ```map $http_accept $_webp```：这行定义了变量映射，它们根据HTTP请求中的Accept头部字段来设置变量```$_webp```。如果包含```image/webp```，则```$_webp```变量会被设置为.webp。如果Accept头部不包含这些格式，变量将被设置为空字符串。

> ```add_header Vary Accept;```：向响应头部添加```Vary: Accept```，这告诉客户端和代理服务器，服务器可能会根据Accept头部返回不同的内容。

> ```try_files $uri$_webp $uri =404;```：这是一个文件查找指令，它首先尝试提供以```.webp```结尾的文件，如果不存在，就提供原始请求的文件。如果原始请求的文件也不存在，则返回404错误。