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'
}]
}
};
要确保你有字体文件大小的限制,否则,它们一定不会被内联进去。