webpack 压缩图片模块

最新推荐文章于 2024-06-19 18:41:45 发布

原创最新推荐文章于 2024-06-19 18:41:45 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#j #javascript #webpack #js

vue-webpack 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何通过image-webpack-loader插件配置Webpack来优化图片资源，包括设置png等格式图片的压缩参数，使得627k大小的png文件被压缩至272k，有效减少加载时间。

1：npm install image-webpack-loader

require("image-webpack-loader")

3:webpack.base.config 修改

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: ['url-loader?limit=8192&name=img/[name].[hash].[ext]',
                'image-webpack-loader?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "55-90", speed: 4}}'], 
                // options: {
                //     limit: 10000,
                //     name: utils.assetsPath('img/[name].[hash:7].[ext]')
                // }
            },
}

627k png压缩成了272,还可以的。