vue-cli3打包時圖片壓縮處理的方法

本篇內(nèi)容介紹了“vue-cli3打包時圖片壓縮處理的方法”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

vue-cli3打包時圖片壓縮

當(dāng)我們在 JavaScript、CSS 或 *.vue 文件中使用相對路徑 (必須以 . 開頭) 引用一個靜態(tài)資源時，該資源將會被包含進(jìn)入 webpack 的依賴圖中。

在其編譯過程中，所有諸如 <img src="...">、background: url(...) 和 CSS @import 的資源 URL 都會被解析為一個模塊依賴。

在其內(nèi)部，vue 通過 file-loader 用版本哈希值和正確的公共基礎(chǔ)路徑來決定最終的圖片路徑，再用 url-loader 將小于 4kb 的圖片內(nèi)聯(lián)，以減少 HTTP 請求的數(shù)量。

我們可以通過 chainWebpack 調(diào)整圖片的大小限制。

例如

我們將圖片大小限制設(shè)置為 6kb，低于6kb的圖片全部被內(nèi)聯(lián)，高于6kb的圖片會放在單獨的img文件夾中。

代碼如下

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    const imagesRule = config.module.rule("images")
    imagesRule
      .use('url-loader')
        .loader('url-loader')
        .tap(options => Object.assign(options, { limit: 6144 }))
  }
}

vue-cli3壓縮圖片配置

安裝image-webpack-loader插件

1、如果先前嘗試使用 yarn 或 npm 安裝過，一定要先卸載掉，然后用 cnpm 安裝

yarn remove image-webpack-loader   // npm uninstall image-webpack-loader

2、使用 cnpm 安裝  image-webpack-loader 會發(fā)現(xiàn)很快就安裝好了，【手動滑稽】

cnpm install --save-dev  image-webpack-loader

注：如果先前嘗試使用 yarn 或 npm 安裝過，一定要先卸載掉用 cnpm 安裝

在vue.config.js當(dāng)中進(jìn)行配置

chainWebpack: config => {
        const imagesRule = config.module.rule('images')
        imagesRule
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    },

然后進(jìn)行打包，圖片的壓縮最高可達(dá)60%以上。

如果在nuxt項目直接下載 image-webpack-loader即可，不用進(jìn)行配置，也能達(dá)到效果。

“vue-cli3打包時圖片壓縮處理的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！