在前端开发中，图片是页面展示的重要组成部分，但图片过大会拖慢页面加载速度，影响用户体验。为了提升页面加载速度，我们可以使用 wepy-plugin-compress 对图片进行压缩。
wepy-plugin-compress 是什么？
wepy-plugin-compress 是一款 wepy 框架的插件，可以对项目中的图片进行压缩，无需手动压缩。该插件使用了 tinify API 进行压缩，支持 JPEG、PNG、GIF 等格式。tinify API 可免费使用 500 次，如果需要更多次数，可以购买。
安装
先确保已安装好 wepy。
npm install wepy-plugin-compress --save-dev
使用
在 wepy.config.js 中配置插件：
-- -------------------- ---- ------- -------------- - - -------- - ----------------------- - ------- -------------------- ------- - ------- ----------------- - - - -展开代码
- filter：匹配文件格式，上面表示匹配 jpg、png、jpeg 三种格式的图片。
- config：插件的配置对象，包含 API Key。
示例代码
<img src="image.jpg" alt="">
使用 wepy-plugin-compress 后，在编译过程中会自动对 image.jpg 进行压缩处理，生成压缩后的图片，并替换原有图片。
image.png ➜ 634B image.jpg ➜ 295KB
注意事项
- 最好在项目上线前使用插件进行压缩，因为一旦使用插件压缩，图片质量会有所降低。
- 插件依赖于 tinify API，如果使用过程中出现问题，可能是因为 API Key 不正确或者超过了免费 500 次的次数限制。
总结
wepy-plugin-compress 是一款非常实用的 wepy 插件，它可以让我们省去手动压缩图片的步骤，从而提高项目的开发效率和用户体验。在使用该插件时，需要注意压缩后的图片质量问题，并及时获取 API Key。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57720
