React with Webpack - 3: 內聯image、font

內聯image

一直到 HTTP/2 版本，你才能在WEB應用加載的時候避免建立太多 HTTP 請求。根據你的瀏覽器，你有一個并行請求數值。如果在你的 CSS 中加載了太多圖片的話，可以自動把這些圖片轉成 BASE64 字符串，然后內聯到 CSS 里來降低必要的請求數，這個方法取決與你的圖片大小。你需要為你的應用平衡下載的大小和下載的數量，而 Webpack 可以讓這個平衡的調整十分輕松。

安裝 url-loader

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

內聯font

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

選擇一種格式

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

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

實踐

就像內聯圖片一樣來內聯字體。

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'}]} };

要確保你有字體文件大小的限制，否則，它們一定不會被內聯進去。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。