如何使用Webpack从CDN预加载Google字体

Question

我的目标是导入字体

@import url('https://fonts.googleapis.com/css?family=Poppins:i,100,200,300);

在我的.scss文件中，然后通过preload-webpack-plugin预加载所有字体

---

部署捆绑包后，将应用google字体，字体请求如下：

与@font-face文件中使用.scss的请求进行比较，获取我下载到本地然后由我自己提供的字体：

仅第二个文件的文件名遵循我在name配置中定义的file-loader：

exports.font = {
  test:   /\.(woff|woff2|ttf|eot)$/,
  loader: 'file-loader',
  query:  {
    name: '[name]-[hash:6].[ext]',
  },
};

这对我来说仍然很合理，所以我想，当Webpack创建依赖关系图css-loader解释@import和url()时，然后file-loader将文件复制到我们的dist文件夹，但是如果源来自外部，则file-loader将无法使用。

---

再次将请求与CDN和本地进行比较，Devtool中的来源部分向我显示：

• CDN：

• 本地：

当我从CDN请求字体时，有一个新文件夹 gstatic ，在添加preload-webpack-plugin之前，当新页面中符合新字体系列/样式时，会动态请求字体，在我添加preload-webpack-plugin之后，仅以向本地发送字体请求的方式预加载字体。

exports.preloadWebpack = new PreloadWebpackPlugin({
  rel:           'preload',
  include:       'allAssets',
  fileWhitelist: [/\.woff/, /\.woff2/, /\.ttf/],
  as:            'font',
});

感谢您的帮助！

Answer 1

您可以考虑使用：Google字体Webpack插件，

并以这种方式使用npm安装它：

npm install @beyonk/google-fonts-webpack-plugin

更多info。