資訊專欄INFORMATION COLUMN
摘要：使用的資源將不會擁有緩存，即如果些張圖片被用來做為有頻率切換動畫例如自定義模擬喇叭播放的動畫這樣就會由于圖片沒有緩存而反復請求導致其他的資源請求排隊，時間從幾秒到一分鐘不等的問題。當然你也可以選擇直接在線轉換后放到里然后引用，效果一樣。
在Vue-cli中，我們默認使用webpack將所有的小于限制數(shù)值的資源轉為base64格式：如下：
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader",
options: {
limit: 10,
}
},
/*limit: 10,限制 圖片大小 10B，小于限制會將圖片轉換為 base64格式*/
這樣做的好處是：將資源轉化為base64可以盡可能的減少網絡請求次數(shù)、提前加載圖片（網絡不好時候提前顯示圖片），但是也有很大的缺點，這也是這篇文章主要想表達的問題。
使用base64的缺點大概有：
1、若轉化的圖片太大，導致數(shù)據(jù)太大，加載過慢，所以一般像Vue在limit通常默認設置的是10000B。
2、使用base64的資源將不會擁有緩存，即如果些張圖片被用來做為有頻率切換動畫（例如自定義模擬喇叭播放的動畫）這樣就會由于圖片沒有緩存而反復請求導致其他的資源請求排隊，pending時間從幾秒到一分鐘不等的問題。
3、在微信小程序里，我們知道背景圖片是只能使用base64格式的，但若是其他的靜態(tài)資源不想使用base64又該如何呢？
下面這種情況是對于不同格式的圖片的定義方法，可以根據(jù)不同格式的圖片做自定義配置：
//webpack.js 中l(wèi)oader配置
{
test: /.(gif|jpg)$/,
loader: "url-loader?limit=10000",
options: {
name: "[name].[ext]?[hash]"
}
},
{
test: /.(png|svg)$/,//(png|jpg|gif|svg)
loader: "url-loader",
options: {
limit: 10,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
}
假如我們想使用一部分base64格式的圖片（音頻、視頻），做法如下：
/*webpack.base.conf.js*/
module: {
rules: [
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader",
options: {
limit: 10,
name: "static/images/[name].[ext]",
}
}
]
}
/* page/index.vue */
這樣就完成了某些資源是base64，其他資源不變的效果。當然 你也可以選擇直接在線轉換后放到css里然后引用，效果一樣。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/100646.html
摘要：既生瑜，何生亮人家當然不是以賣萌為生的，賣萌不可恥，但是是有它的用處的。對未設置或者小于設置的圖片進行轉換，以的格式被的所使用而對于大于的圖片用進行解析。配置工欲善其事必先利其器。 url-loader vs file-loader 既生瑜，何生亮？ 人家當然不是以賣萌為生的，賣萌不可恥，但是url-loader是有它的用處的。url-loader對未設置或者小于limit設置的圖片進...
摘要：插件則可以用于執(zhí)行范圍更廣的任務。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量等。插件的使用一般是在的配置信息選項中指定。到這里基本配置已經告一段落了，所有配置我已經放在倉庫中第二期優(yōu)化教程已出歡迎關注和提問 1、了解Webpack相關 什么是webpack Webpack是一個模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/js...
摘要：官方的文檔模塊受到影響的選項。官方文檔通過注入標簽將添加到。官方文檔這兩者一般都是配合在一起用的。代表圖片打包限制，這個限制并不是說超過了就不能打包，而是指當圖片大小小于限制時會自動轉成碼引用。不過它的放后面。 第一篇講了Webpack的安裝，以及配置文件的 entry，devtool，output，resolve。這篇接著說配置文件的 module。想看看第一篇的朋友可以點 這里。 ...
摘要：它將包括如何處理圖片以及對老版本的語言的轉換。添加使用最好的方式是在文件中指定它們。而相反，文件被轉換為了。它允許你使用轉譯文件。此外，我們還學習如何使用處理圖片。在教程未來的部分，我們會深入到中，包括寫一個我們自己的。 轉載請注明出處：葡萄城官網，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務，賦能開發(fā)者。 今天繼續(xù)我們的Webpack 4入門教程。在介紹了Webpack的基本概...
閱讀 1115·2021-11-16 11:45
閱讀 3134·2021-10-13 09:40
閱讀 723·2019-08-26 13:45
閱讀 1222·2019-08-26 13:32
閱讀 2181·2019-08-26 13:23
閱讀 920·2019-08-26 12:16
閱讀 2832·2019-08-26 11:37
閱讀 1763·2019-08-26 10:32
