webpack 解决 semantic ui 中 google fonts 引用的问题

Posted 2020-09-22 猫哥_kaiye | 编程笔记

semantic ui css 的第一行引用了 google web font api，由于不可告人而又众所周知的原因，这条链接在国内无法访问：

@import url(‘https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin‘);

css 是阻塞渲染的，而 css 中的 import 又会进一步阻塞加载和渲染，所以就导致页面样式加载十分缓慢。

像 semantic ui 这样的开源框架，一般使用 npm 或者 bower 安装，也不好去直接修改源码。

借助 webpack 的 string-replace-webpack-plugin 可以将这句引用进行替换，从而解决渲染阻塞问题。

以下是相关 webpack.config.js 配置示例，可供参考：

var path = require(‘path‘)
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘)
var StringReplacePlugin = require(‘string-replace-webpack-plugin‘)

module.exports = {
  entry: {
    common: ‘./static/src/global.js‘
  },
  output: {
    filename: ‘[name].js‘,
    path: path.resolve(__dirname, ‘static/global/‘),
    publicPath: ‘/static/global/‘
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({use: [‘css-loader‘]})
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [‘css-loader‘, ‘sass-loader‘]
        })
      },
      {
        test: /semantic\.css$/,
        loader: StringReplacePlugin.replace({
          replacements: [{
              pattern: /https\:\/\/fonts\.googleapis\.com[^\‘]+/ig,
              replacement: function (match, p1, offset, string) {
                return ‘data:text/css,*{}‘
              }
            }]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin(‘common.css‘),
    new StringReplacePlugin()
  ]
}

需要注意的是 webpack v2 中 rule 的结合顺序是从后至前、从右至左，所以 semantic.css 复写的 rule 要放到最后，且不包含其他 loader 设置。