源代码 github.com/Maricaya/h5… 主要查看两个文件
webpack.config.js和/src/components/Icon.tsx
背景
又到了愉快的总结时刻，这次我们来看看怎么优化项目中的 Icon。
每次写项目引入 icon 的时候都写一大堆:
<img src="icons/chart.svg" alt="" />
复制代码最好能在项目中直接实现 element-ui 的引入效果：
<Icon name="icon-file-name"/>
复制代码直接一句话就可以引入 Icon，这样多方便呀。
网上搜寻了一圈，找到了两个非常好用的 loader：
svg-sprite-loader、svgo-loader
来看看他们是怎么工作的吧！
svg-sprite-loader
原理
svg-sprite-loader 会把你的 svg 塞到一个个 symbol 中，合成一个大的 svg。
最后将这个大的 svg 放入 body 中。
symbol的id如果不特别指定，就是你的文件名。
在页面上形成这样的元素：
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="__SVG_SPRITE_NODE__">
<symbol xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" id="xxx">// id 是 icon 名
<!-- 这块是 path -->
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" id="xxx">// id 是 icon 名
<!-- 这块是 path -->
</symbol>
</svg>
</body>
复制代码我们的每一个 icon 都对应着一个 symbol 元素，这个时候我们就可以在页面使用 svg use 啦。
<svg>
<use xlink:href="#xxx"/> // xxx 为id
</svg>
复制代码我们可以把 symbol 理解为 sketch 中内置的图形。
当你需要使用这个图形的时候，把这个形状”拉”到你的画板中就行了。
而 use 就是这个”拉”的行为。
总结一下工作原理：
利用 svg 的 symbol 元素，将每个 icon 包裹在 symbol 中，通过 use 使用该 symbol。
使用方法
安装
yarn add --dev svg-sprite-loader
复制代码配置 webpack.config.js，在 module.rules 添加：
{
test: /\.svg$/,
use: [
{ loader: 'svg-sprite-loader', options: {} }
]
}
复制代码icon 写法
<svg>
<use xlink:href="#xxx"/> // xxx 为id
</svg>
复制代码SVGO
背景
设计小姐姐在切图时，可能不会注意某些细节。
比如，PSD 看上去是好的，但是放大个 100 倍，路径的转角和边缘都没对上。
此时如果直接使用 SVG，一个是 SVG 文件太大，二是最终的图像可能不是我们想要的。
这个时候就需要 SVGO 来帮我们处理 svg。
原理
SVGO 将 SVG-as-XML 数据转换为 SVG-as-JS AST 表示形式。
然后在所有AST数据项上运行并执行一些操作，最后，SVGO 再将 AST 转换回 SVG-as-XML 数据字符串。
想深入了解原理的同学，可以看看 官方解释。
我就不在这里啰嗦啦。
用法
SVGO 是 svg 优化器，包含很多插件。
它可以删除和修改SVG元素，折叠内容，移动属性等等等等。
安装
yarn add --dev svgo-loader
复制代码继续配置 webpack.config.js
{
test: /\.svg$/,
use: [
{ loader: 'svg-sprite-loader', options: {} },
+ { loader: 'svgo-loader', options: {} }
]
}
复制代码引入项目中的 svg 文件会经过 svgo-loader => svg-sprite-loader 的处理。
先处理 svg 图像，然后在页面中生成 svg-symbols。
icon 写法
<svg className="icon" fill="#ccc">
<use xlinkHref={'#' + props.name} />
</svg>
复制代码Icon 组件化
最后，再单独写一个 Icon 组件。
完整代码如下:
Icon.tsx
import React from 'react'
// TreeShaking 不适用于 require
require('icons/money.svg')
require('icons/tag.svg')
require('icons/chart.svg')
type Props = {
name: String
}
const Icon = (props: Props) => {
return (
<svg className="icon">
<use xlinkHref={'#' + props.name} />
</svg>
)
}
export default Icon;
复制代码使用时:
<Icon name="money" />
复制代码一次性引入所有 Icon
做完了 Icon 组件，又发现一个小小的问题。
在 Icon.tsx 文件中引入 svg 需要一个一个引入，能不能一次性全部引入呢？
可以，不想一直重复引入，我们需要 require 一个目录。
// 不想一直重复引入，需要 require 一个目录
// 因为使用了 TypeScript 需要安装 webpack 的类型文件 @types/webpack-dev
// yarn add --dev @types/webpack-dev
let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
requireContext.keys().forEach(requireContext);
try {importAll(require.context('icons', true, /\.svg$/));}
catch (error) {console.log(error);}
复制代码利用 webpack 提供的 require.context API 来创建自己的 context module 动态引入 icon。
require.context(directory, useSubdirectories = false, regExp = /^\.\//)
复制代码它接受三个参数
- 要搜索的文件夹目录
- 是否还应该搜索它的子目录，
- 以及一个匹配文件的正则表达式。
对于我们的项目来说，我们需要动态引入的就是
require.context('icons目录', true, /\.svg$/)
复制代码require.context 会返回一个函数，并且该函数有keys()，id， resolve() 属性。
一个 context module 会导出一个（require）函数，此函数可以接收一个参数：request。
此导出函数有三个属性：resolve, keys, id。
- resolve 是一个函数，返回的是请求的 module 的 id
- keys 也是一个函数，它返回一个数组，是满足该参数的模块。
- id是该 context module 的id
如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助，例如：
function importAll (r) {
r.keys().forEach(r);
}
importAll(require.context('../components/', true, /\.js$/));
复制代码总的来说，就是说 require.context 帮我们创建一个上下文。
比如在这里我们的上下文就是 ./src/assets/icons。
随后我们就可以通过 require.resolve 来引入该上下文内的文件了。
总结
最后，来总结一下 Icon 组件的优化方式。
- 使用
svg-sprite-loader制作 svg-symbol。让我们可以直接使用 svg-use。 - 使用
svgo-loader优化 svg。 - 最后，使用
require.context一次引入所有文件。
