React with Webpack - 3: 內(nèi)聯(lián)image、font

內(nèi)聯(lián)image

一直到 HTTP/2 版本，你才能在WEB應(yīng)用加載的時(shí)候避免建立太多 HTTP 請(qǐng)求。根據(jù)你的瀏覽器，你有一個(gè)并行請(qǐng)求數(shù)值。如果在你的 CSS 中加載了太多圖片的話，可以自動(dòng)把這些圖片轉(zhuǎn)成 BASE64 字符串，然后內(nèi)聯(lián)到 CSS 里來降低必要的請(qǐng)求數(shù)，這個(gè)方法取決與你的圖片大小。你需要為你的應(yīng)用平衡下載的大小和下載的數(shù)量，而 Webpack 可以讓這個(gè)平衡的調(diào)整十分輕松。

安裝 url-loader

執(zhí)行命令npm install url-loader --save-dev來安裝url-loader加載器，它會(huì)把需要轉(zhuǎn)換的路徑變成 BASE64 字符串。 Webpack 會(huì)解析你 CSS 中的 “url()”，就像其他 require 或者 import 語句一樣處理。這意味著，我們可以在config.js中通過圖片文件的擴(kuò)展名來進(jìn)行配置，然后使用url-loader來處理它們。

內(nèi)聯(lián)font

要正確引入字體實(shí)在是非常難。首先，通常我們有 4 種不一樣的格式，但是只有其中一種會(huì)被對(duì)應(yīng)的瀏覽器使用到。你肯定不會(huì)想引入全部四種格式，這樣只會(huì)讓 CSS 文件急劇膨脹，然后又沒辦法優(yōu)化。

選擇一種格式

根據(jù)你的項(xiàng)目，你有可能選擇出一種字體格式，如果你不考略 Opera Mini，所有的瀏覽器都支持 .woff 和 .svg 格式。問題是在不同瀏覽器下和不同版式下，字體看起來會(huì)有一點(diǎn)點(diǎn)不同。所以測(cè)試 .woff 和 .svg，然后找出能夠在所有瀏覽器中看起來最好的那個(gè)。

可能你還有其他更好的策略，那請(qǐng)分享一下。

實(shí)踐

就像內(nèi)聯(lián)圖片一樣來內(nèi)聯(lián)字體。

var path = require('path'); var config = {entry: path.resolve(__dirname, 'app/main.js')output: {path: path.resolve(__dirname, 'build'),filename: 'bundle.js'},module: {loaders: [{test: /\.jsx$/,loader: 'jsx'}, {test: /\.woff$/,loader: 'url?limit=100000'}]} };

要確保你有字體文件大小的限制，否則，它們一定不會(huì)被內(nèi)聯(lián)進(jìn)去。

總結(jié)

以上是生活随笔為你收集整理的React with Webpack - 3: 内联image、font的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。