首页 > 代码库 > webpack 解决 semantic ui 中 google fonts 引用的问题
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 设置。
webpack 解决 semantic ui 中 google fonts 引用的问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。