vue 项目中图片压缩方法小结

时间:2024-02-25 21:34:05

项目中,我们通常会遇到图片静态资源太大,那么我们怎么来压缩图片体积呢?

 

方法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 的时候把图片体积进行压缩。

 

小结:

项目中,可以结合方法一和方法二来对项目中的图片体积进行压缩,来达到访问提速的效果。