webpack 怎样生成 inline (内联) 的 style 或 script

背景

最近一个项目用到 React,默认配置下,样式和脚本都通过混淆压缩合并后生成一个 css 或 js 文件(通过 ExtractTextPlugin ),并插入到 index.html 中,详细的配置可查看 eject 后的 webpack 配置文件。

而由于输出的 css 和 js 文件都有数十 KB,在第一次加载页面时,会出现一个白屏的情况,所以我在 index.html 中加了一个 Loading 效果,但是由于 Loading 的样式也是在 css 文件内的,并没有达到预期的效果,所以想是不是可以把一些基础样式单独抽出来放到 index.html 中内联。

ExtractTextPlugin

这个插件可以把符合条件的内容输出到一个独立的文件当中,详细配置查看 https://doc.webpack-china.org/plugins/extract-text-webpack-plugin/,在 webpack.config.prod.js 配置中已经包含了该 plugin,仅用于输出外部引入的 css 文件,我们可以修改下。

此处定义了两个实例,把 extractCss 用于处理原有的 css 文件输出,extractInlineCss 用于处理需要 inline 的 css,下面是常见的 webpack 配置内容,我们在 css 处理器前加上 inline css 的处理

完成这个步骤后,build 过程会对 inline.css 结尾的文件合并并输出到 main.inline.css

HtmlWebpackInlineSourcePlugin

这个插件可以把符合条件的 css 或 js 内联到 index.html 中,详细配置查看 https://github.com/DustinJackson/html-webpack-inline-source-plugin,这里我们需要把 inline.css 结尾的文件内联进来。

最后,build 完的结果是把这些 inline.css 的内容都内潜入 index.html 中,以致在未加载完独立 css 和 js 时也可以把 Loading 显示正确。

您可能还喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.