vue 项目中图片压缩方法
cnpm i image-webpack-loader -D
·
项目中,我们通常会遇到图片静态资源太大,那么我们怎么来压缩图片体积呢?
方法1:PS或者在线网站进行图片压缩。
推荐网站1
https://tinypng.com/
此网站可以批量压缩图片,当然你一次性压太多,网站也会报错无法压缩成功,没关系,你重新多试几次即可。
而且,你可以反复压很多次,这样可以把图片一直缩小体积。
推荐网站2
https://www.bejson.com/ui/compress_img/
该网站优点是自定义压缩体积,缺点是一次只能压一张图片。
方法2:npm 包形式来进行图片压缩
通过如下命令,安装第三方包
cnpm i image-webpack-loader -D
然后在vue.config.js进行如下配置:
module.exports = { publicPath: '', // 为空,则项目可放在服务器任何位置 css: { loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ unitToConvert: "px", //需要转换的单位,默认为"px" viewportWidth: 1920, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 unitPrecision: 5, //单位转换后保留的精度 propList: [ //能转化为vw的属性列表 "*" ], viewportUnit: "vw", // 希望使用的视口单位 fontViewportUnit: "vw", //字体使用的视口单位 selectorBlackList: [], //需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。 minPixelValue: 1, //设置最小的转换数值,如果为1的话,只有大于1的值会被转换 mediaQuery: false, //媒体查询里的单位是否需要转换单位 replace: true, //是否直接更换属性值,而不添加备用属性 exclude: /(\/|\\)(node_modules)(\/|\\)/, //忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件 }) ] } } }, productionSourceMap: false, chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end() }, }
注意:你只需要在module.exports 里面添加红色标注的部分。这样,就可以在打包npm run build 的时候把图片体积进行压缩。
小结:
项目中,可以结合方法一和方法二来对项目中的图片体积进行压缩,来达到访问提速的效果。
更多推荐
所有评论(0)