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

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

 

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

 

小结：

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