React with Webpack - 3: 内联image、font

2024-05-15 07:35:00

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相关推荐

webpack转内联px为rem_Vuejs项目配置webpack将px自动转化为rem，适配移动端
本项目采用 iPhone 6 物理像素为 750px * 1334px 的设计稿 rem兼容性先看看rem的兼容性,关于移动端 ios:6.1系统以上都支持 android:2.1系统以上都支持大 ...
react内联样式_React样式化的组件：内联样式+ 3种其他CSS样式化方法（带有示例）...
react内联样式 There's no one right way to style your React components. It all depends on how complex you ...
React 项目----内联样式style的使用（12）
在此我们之前学习了react的基本的语法,对于页面我们还经常关注的是页面的样式,那么react 项目中,我们应该如何使用样式首先我们来做一个简单的页面一个评论的列表模拟数据: commentLis ...
[react] 写个例子说明什么是JSX的内联条件渲染
[react] 写个例子说明什么是JSX的内联条件渲染 ifTrue ? <ComA /> : <ComB>ifTrue && <ComC/> 个人 ...
[webpack] 如何把代码内联进html中？
作者:滴滴公共前端团队 - 水乙我们平常在打包文件的时候,有时候需要把 js.css 等代码内联进 html 中,减少文件的请求,优化加载速度. 用过 fis 的同学应该对 __inline 语法比 ...
react里面内联css样式怎么样_React.js内联样式最佳做法
小编典典目前还没有很多"最佳实践".我们中那些使用内联样式作为React组件的人仍在进行大量试验. 全部还是全部? 我们所称的"样式"实际上包括许多概念: 布 ...
iframe内联元素有白边原因_教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？
作者:Huup_We 转发链接:https://mp.weixin.qq.com/s/21ydrXuinCtYiJdsynsTrA 前言想要构建一个体验丰富的网站,嵌入组件和内容几乎是不可避免的,而 ...
React with Webpack - 2: css 处理
React with Webpack - 2 – css处理 Webpack允许像加载任何代码一样加载 CSS,而且你可以选择自己的加载策略:你可以在入口主文件中加载所有的CSS 文件,也可以在每 ...
CSS内联样式的使用，吐血整理
前言本文主要是javascript和css方面的基础面试题,适合面试前以及平时复习食用. 基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack.git.node ...

最新文章

热门文章