React with Webpack - 3: 内联image、font

最新推荐文章于 2024-12-26 12:17:12 发布

转载最新推荐文章于 2024-12-26 12:17:12 发布 · 1.5k 阅读

文章标签：

#react-js #webpack #css #内联image #内联font

webpack 同时被 2 个专栏收录

5 篇文章

订阅专栏

react-js

4 篇文章

订阅专栏

本文介绍如何使用Webpack通过url-loader实现图片与字体文件的内联处理，以减少HTTP请求次数，提升网页加载速度。文中详细解释了如何配置Webpack来转换图片为BASE64字符串，并针对字体文件提供了一种优化策略。

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