Webpack5资源大小警告及多格式同字体引入相关问题咨询

该244KiB的体积限制是Webpack的通用性能提示，没有过时，只是默认规则没有对字体这类特殊静态资源做例外适配，不推荐直接全局关闭hints: false，更合理的做法是通过assetFilter单独排除字体类资源的大小检查：

performance: {
  assetFilter: function(assetFilename) {
    // 仅对非字体资源做体积提示
    return !/\.(woff|woff2|ttf|otf|eot)$/.test(assetFilename);
  }
}

降低字体资源体积的可用方法包括：

• 字体子集化：如果仅用到部分字符（比如中文常用字、仅数字英文字符），可以提取需要的字符生成子集字体，体积往往能降到原文件的1/10甚至更低，Webpack构建阶段可以配合fontmin-webpack等插件自动完成处理。
• 精简字体格式：woff2的压缩率比woff高30%左右，远高于ttf格式，如果不需要兼容非常老旧的浏览器，可以考虑不导出ttf格式，直接减少构建产物占用的存储体积。

不会产生明显影响。浏览器解析@font-face规则时，只会下载首个自身支持的字体格式，只要你CSS中字体声明的顺序按「woff2 → woff → ttf」从优到劣排列，现代浏览器只会加载体积最小的woff2文件，根本不会请求体积更大的woff和ttf资源。
只有两种特殊情况会产生额外开销：

• 配置了preload规则预加载了所有格式的字体，导致浏览器同时下载多个不需要的资源
• 静态资源配置了错误的缓存规则，导致用户每次访问都要重新下载字体资源

内容的提问来源于stack exchange，提问作者홍우지