亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue-cli3打包時(shí)圖片壓縮處理方式

 更新時(shí)間：2022年03月28日 16:57:43   作者：明月松江  
這篇文章主要介紹了vue-cli3打包時(shí)圖片壓縮處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-cli3打包時(shí)圖片壓縮

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

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

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

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

例如

我們將圖片大小限制設(shè)置為 6kb，低于6kb的圖片全部被內(nèi)聯(lián)，高于6kb的圖片會(huì)放在單獨(dú)的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 安裝過(guò)，一定要先卸載掉，然后用 cnpm 安裝

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

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

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

注：如果先前嘗試使用 yarn 或 npm 安裝過(guò)，一定要先卸載掉用 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項(xiàng)目直接下載 image-webpack-loader即可，不用進(jìn)行配置，也能達(dá)到效果。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論