url-loader

其實說到性能優化，他的範圍太廣了，今天咱們就只聊一聊經過webpack配置減小http請求數量這個點吧。

簡單說下工做中遇到的問題吧，咱們作的一個項目中首頁用了十多張圖片，每張圖片都是一個靜態資源，因此都會有http請求，爲了減小請求，咱們能夠經過base64編碼的方法來展現圖片。webpack中有一個包叫作url-loader，他能夠將html以及css中的圖片打包成base64，可是js中若是有圖片url並不能編譯成功（後面我會說明），現附上兩張圖看下普通圖片以及base64編碼後的圖片有啥不一樣吧。

 

簡單點說，base64就是一串加密的字符串。並且base64編碼過的圖片是沒有http請求的（注意看此圖，爲何有的圖使用的base64有的卻沒有，這是有緣由的，這個咱們稍後解釋）。

 

 

好吧，如今先回到咱們的主角——url-loader，簡單看下他的配置參數吧。

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                include: [resolve('static'),resolve('src')],
                options: {
                    limit: 100000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
}

 

我用的是vue-cli腳手架工具，因此這個實在webpack.base.config,js中配置的，test就是正則匹配圖片格式，loader是使用url-loader，options是配置選項，好比咱們通常會把小於8kb的圖片才作base64轉換，這個東西經過limit來控制（固然咱們是小於100kb），name就是自定義image的路徑以及name，include就是你想讓哪一個文件夾裏面的圖片進行url-loader轉換，建議寫上include，若是不寫就會全局搜索，效率低下，並且文件夾不寫全也會報錯。固然還有一種格式是能夠直接寫到loader中的，就是以query的形式去拼裝options。

{
    test: /\.(gif|jpg)$/,
    loader: 'url-loader?limit=30000',
    options: {
        name: '[name].[ext]?[hash]'
    }
}

在這裏具體看下我們配置的name屬性吧，他是配合config文件中的那一堆assetsPath來用的，

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/'

index必須是本地文件系統上的絕對路徑。

assetsRoot是全部靜態資源的根路徑（必須是絕對路徑）
assetsSubDirectory是被webpack編譯處理過的文件，好比咱們要使用url-loader處理image
assetsPublicPath這個是http服務器運行的根路徑（好比咱們線上是www.baidu.com/indexbeta這個做爲根路徑，就須要將它改成'/indexbeta/'）。

最終線上就會呈現這種path

如今咱們知道打包後的image-url是根據這些配置參數以及url-loader的name來生成的。而後問題又來了，既然有這個好東西，是否是可讓全部的圖片都展現base64，這確定不行，由於上面那張編碼過的png只有不到5kb，圖片太大的話base64字符串會更長，因此還不如用http請求，這也就是爲何默認limit是10000了，就是讓8kb以內的圖片才編碼。

但咱們的項目中有的圖片列表是用v-for遍歷出來的，也就是url放到了js中（vue文件的data裏），這樣就不能被base64編碼了，url-loader只會去編譯html以及css中的image。因此可使用import圖片的方式經過一個變量去接受，而後將這些變量放到v-for中去渲染。

當咱們使用base64轉碼後，首頁的渲染時間縮短了2秒，是否是很給力呢。