vue-cli3打包時(shí)圖片壓縮處理方式
vue-cli3打包時(shí)圖片壓縮
當(dāng)我們?cè)?JavaScript、CSS 或 *.vue 文件中使用相對(duì)路徑 (必須以 . 開頭) 引用一個(gè)靜態(tài)資源時(shí)，該資源將會(huì)被包含進(jìn)入 webpack 的依賴圖中。
在其編譯過程中，所有諸如 <img src="...">、background: url(...) 和 CSS @import 的資源 URL 都會(huì)被解析為一個(gè)模塊依賴。
在其內(nèi)部，vue 通過 file-loader 用版本哈希值和正確的公共基礎(chǔ)路徑來決定最終的圖片路徑，再用 url-loader 將小于 4kb 的圖片內(nèi)聯(lián)，以減少 HTTP 請(qǐng)求的數(shù)量。
我們可以通過 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 安裝過，一定要先卸載掉，然后用 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 安裝過，一定要先卸載掉用 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)文章
眾所都知vue是一個(gè)單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue單頁面改造多頁面應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了uni-app 的生命周期，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
Vue3中引入Pinia存儲(chǔ)庫(kù)使用示例詳解
這篇文章主要介紹了Vue3中引入Pinia存儲(chǔ)庫(kù)使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Vue開發(fā)工具之vuejs-devtools安裝教程及常見問題解決(最詳細(xì))
這篇文章主要介紹了Vue開發(fā)工具vuejs-devtools超級(jí)詳細(xì)安裝教程以及常見問題解決本篇文章是最詳細(xì)的vue開發(fā)工具vuejs-devtools安裝教程,需要的朋友可以參考下2022-11-11
下面小編就為大家分享一篇解決vue頁面DOM操作不生效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了關(guān)于.prettierrc代碼格式化配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示
這篇文章主要介紹了vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue子組件中使用window.onresize()只執(zhí)行一次問題
這篇文章主要介紹了vue子組件中使用window.onresize()只執(zhí)行一次問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue項(xiàng)目中添加鎖屏功能實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項(xiàng)目中添加鎖屏功能的實(shí)現(xiàn)思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06