跳转到主要内容

使用Laravel Mix优化Fontawesome 5提高网站加载速度

网站加载的速度是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
分类