网站加载的速度是google等搜索引擎排名的一个重要考量因素。通常为了让网站更加酷炫吸引访客，我们会在网站上使用一些字体图标，目前比较流行的Fontawesome 5就是一个非常不错的选择。
目前Fontawesome 5建议使用svg来显示图标，所以不考虑旧版本升级到5的需求，可以直接使用js配合svg。网页中的图标编码方式不变，加载js后会自动执行加载svg显示，这个svg是可以矢量缩放的。但是随之而来的问题是庞大的js文件和sprite文件问题。免费版的5.12的js文件压缩后单文件是1.2M，sprite文件1M，pro版的js文件更是达到了5.4M。
本来弱水三千，我只取一瓢，结果给了我一条河，初次加载非常影响网站速度，直接使用fontawesome是非常不可取的。一般来说一个简单的网站常用图标不超过20个，而这个完整的包竟然包含了近万个图标，实在是没有必要，如果确实想使用fontawesome且需要保持文件系统结构不变，可以通过手动方法来瘦身，如果不关注文件结构只是简单使用，还有更简单的办法。好在不论是免费还是pro的包中都包含了scss和js源文件，我们可以自己创建一个laravel-mix文件来重新构建一次，由于5.0可以不使用css文件，我们只需要重新修改js文件并生成新的svg sprite文件即可。
修改js文件
打开js目录，免费版本里面有brands.js,regular.js,solid.js, 而pro版本则多了light.js和duotone.js两个文件，这些是对应类型svg的原始脚本，里面定义调用了所有对应类型svg。先备份原始文件，以备后期需要添加图标之用。
...
var e = {
"500px": [448, 512, ...//略数千行
};
对应的每一个文件都有类似的定义，不用的类型直接删除，比如brands.js，不使用fab类型图标，则删除文件即可。部分使用则保留相应图标定义，删除不使用的图标定义。这里简单说明一下对应关系：solid->fas, brands->fab, regular->far, light->fal, duotone->fad.
通过以上办法一个1M大小的js可以瘦身到20多k，效果提升明显，好了合并压缩的工作暂时先放一边，用同样的办法对sprites文件进行瘦身。这个文件就类似于webfont字体文件，里面包含了所有的字体图标的定义，我们依然不想加载这么大的文件。
重新打包svg文件
...
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="500px" //省略数千行
</svg>
在svgs目录中有数千个单图标定义svg文件，但是让网站去加载上千个附件显然是不合适的，所以得打包到sprites中。这回不用一行行修改了，直接找出需要的图标放进一个source目录，不需要的也不用删除，先放在原处。现在开始编辑Laravel mix文件和package.json文件：
{
"name": "Fontawesome",
"description": "Fontawesome生成",
"private": true,
"scripts": {
"postinstall": "find node_modules/ -name '*.info' -type f -delete",
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"cross-env": "5.2.1",
"jquery": "3.4.1",
"laravel-mix": "4.1.4",
"laravel-mix-svg-sprite": "^1.0.1",
"popper.js": "1.16.1",
"resolve-url-loader": "2.3.2",
"sass": "1.25.0",
"sass-loader": "7.1.0",
"svg-spritemap-webpack-plugin": "^3.5.5",
"vue-template-compiler": "2.6.11"
}
}
以下是webpack.mix.js文件：
const mix = require('laravel-mix');
var SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
/**js合并**/
mix.combine([
'src/script/brands.js',
'src/script/conflict-detection.js',
'src/script/regular.js',
'src/script/solid.js',
'src/script/duotone.js',
'src/script/fontawesome.js'
], 'target/js/all.js');
/**svg打包,这里假设使用brands**/
mix.webpackConfig({
plugins: [
new SVGSpritemapPlugin(
'src/svgs/brands/*.svg', {
output: {
filename: 'target/sprites/brands.svg',
svg: {
sizes: false
},
svg4everybody: true,
svgo: true
}
})
]
});
运行命令行：
#安装依赖包
npm install
#完成以上任务之后,打包并压缩
npm run production
将all.js手动改名为all.min.js即可，文件已经被压缩。然后比对默认sprites目录的svg文件，将新打包的svg代码段拷贝到原始文件替换掉数千行的symbol 标签即可。
通过以上操作，一个mini的fontawesome标准包就完成了。
参考：
https://github.com/cascornelissen/svg-spritemap-webpack-plugin/blob/master/docs/options.md
https://learnku.com/docs/laravel-mix/4.0
