目录

工程维护

在打包多页面应用的时候，每个页面会有一个 HTML 模版与之对应。每个 HTML 模版都会包含很多相似的内容，比如 meta 信息或 SSR 时需要用到的一些占位符。如果将 meta 代码分别复制一份放到每一个 HTML 模版里面会对代码维护造成影响。

这个时候推荐的做法是维护一份 meta.html，每个 HTML 模版将 meta.html 片段内联进去。

另一个比较常见的场景就是图片、字体等文件等内联。可能的处理：找一个在线的 base64 编码工具去将各种图片 (png、jpg、gif) 或者 字体 (ttf、otf) 编码，然后将编码后的那一长串字符串放置到代码里面去。比如这个搜索 icon 图标，这段长串的字符串放置在源代码里面根本毫无语义，而且对维护者而言也是场灾难。

// index.css
.search {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABJ0lEQVQ4T6XSsUoEMRAG4H/ClZaLmbSW1pZ6+gAnFrK+gZXoK6jvIILgE6gIcnYWgmJno6AgYp1Z2EcIGQnsHbuaQ9abMkO+TGaGMGfQnPfxC3DOrajqPoB1AArgnohOvffPucc6ADMfAjgCUMYYH9MFY8wagEsAxyKScp2YAtbaERGNRST7LWZWVd2squq2LbSBMyK6E5GrXKnW2i1jzMh7v5sFmPkzhDCs69rngKIo3GAweBKRpVnAVwhh9Q/gRUQWs4Bz7jzGeFNV1ThXATOXAA5EJDV1Gr2aSETb3vvrLJAOmTmNKY2yVNUHVSVjzBDABYA3ADsi8j4TSIlmkfYAbABYUNUPACdE9NpAHaTXKjPz8k+kF9B8s4P0BibIpBf/AtpN/AYx54AR58WxmQAAAABJRU5ErkJggg==) no-repeat;
}

页面加载性能

减少 HTTP 网络请求数，如果你的网站使用 HTTP2 这点的意义可能不会那么大。

将各种小图片、小字体（比如：小于 5k) 在生产环境 base64 到代码里面可以极大的减少页面的请求数量，从而提升页面的加载时间。

加载体验

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

HTML 和 JS 内联

使用 raw-loader

// 内联 HTML 片段
<script>$(require('raw-loader!babel-loaderl!./meta. html')</script>

// 内联 JS
<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')}</script>

CSS 内联

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

// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\\\\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top', // 样式插入到 <head>
              injectType: 'singletonStyleTag', // 将所有的 style 标签合并成一个
            }
          },
          'css-loader'
        ]
      }
    ]
  }
}