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 的時候把圖片體積進行壓縮。

 

小結：

項目中，可以結合方法一和方法二來對項目中的圖片體積進行壓縮，來達到訪問提速的效果。