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

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 设置。

 

posted @ 2017-06-09 13:56  猫哥_kaiye  阅读(2187)  评论(0编辑  收藏  举报