目录

  • HTML 和 JS 内联
  • CSS 内联
  • 图片、字体内联

    工程维护

    在打包多页面应用的时候，每个页面会有一个 HTML 模版与之对应。每个 HTML 模版都会包含很多相似的内容，比如 meta 信息或 SSR 时需要用到的一些占位符。如果将 meta 代码分别复制一份放到每一个 HTML 模版里面会对代码维护造成影响。
    这个时候推荐的做法是维护一份 meta.html，每个 HTML 模版将 meta.html 片段内联进去。
    另一个比较常见的场景就是图片、字体等文件等内联。可能的处理：找一个在线的 base64 编码工具去将各种图片 (png、jpg、gif) 或者 字体 (ttf、otf) 编码，然后将编码后的那一长串字符串放置到代码里面去。比如这个搜索 icon 图标，这段长串的字符串放置在源代码里面根本毫无语义，而且对维护者而言也是场灾难。
  1. // index.css
  2. .search {
  3.   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABJ0lEQVQ4T6XSsUoEMRAG4H/ClZaLmbSW1pZ6+gAnFrK+gZXoK6jvIILgE6gIcnYWgmJno6AgYp1Z2EcIGQnsHbuaQ9abMkO+TGaGMGfQnPfxC3DOrajqPoB1AArgnohOvffPucc6ADMfAjgCUMYYH9MFY8wagEsAxyKScp2YAtbaERGNRST7LWZWVd2squq2LbSBMyK6E5GrXKnW2i1jzMh7v5sFmPkzhDCs69rngKIo3GAweBKRpVnAVwhh9Q/gRUQWs4Bz7jzGeFNV1ThXATOXAA5EJDV1Gr2aSETb3vvrLJAOmTmNKY2yVNUHVSVjzBDABYA3ADsi8j4TSIlmkfYAbABYUNUPACdE9NpAHaTXKjPz8k+kF9B8s4P0BibIpBf/AtpN/AYx54AR58WxmQAAAABJRU5ErkJggg==) no-repeat;
  4. }

页面加载性能

减少 HTTP 网络请求数，如果你的网站使用 HTTP2 这点的意义可能不会那么大。
将各种小图片、小字体（比如：小于 5k) 在生产环境 base64 到代码里面可以极大的减少页面的请求数量，从而提升页面的加载时间。

加载体验

CSS 内联避免页面闪动
上报相关打点
页面框架的初始化脚本

HTML 和 JS 内联

使用 raw-loader

  1. // 内联 HTML 片段
  2. <script>$(require('raw-loader!babel-loaderl!./meta. html')</script>
  4. // 内联 JS
  5. <script>${require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')}</script>

CSS 内联

方案一：借助 style-loader（不能和 mini-css-extract-plugin 共存）

  1. // webpack.config.js
  2. module.exports = {
  3.   //...
  4.   module: {
  5.     rules: [
  6.       {
  7.         test: /\\.css$/,
  8.         use: [
  9.           {
  10.             loader: 'style-loader',
  11.             options: {
  12.               insertAt: 'top', // 样式插入到 <head>
  13.               injectType: 'singletonStyleTag', // 将所有的 style 标签合并成一个
  14.             }
  15.           },
  16.           'css-loader'
  17.         ]
  18.       }
  19.     ]
  20.   }
  21. }

方案二：html-inline-css-webpack-plugin

  1. // webpack.config.js
  2. const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default
  4. module.exports = {
  5.   //...
  6.   plugins: [
  7.     new MiniCssExtractPlugin({
  8.       filename: '[name]_[contenthash:8].css'
  9.     }),
  10.     new HtmlWebpackPlugin()
  11.     new HTMLInlineCSSWebpackPlugin()
  12.   ]
  13. }

使用 html-inline-css-webpack-plugin 需要 mini-css-extract-plugin和 html-webpack-plugin。

html-inline-css-webpack-plugin 需要放到 html-webpack-plugin 后面。

图片、字体内联

借助 url-loader，可以通过配置 webpack 配置让小于 10K 的图片或字体文件在构建阶段自动 base64。