首屏加载优化

在 root 节点中写一些东西

<!-- 不美观 -->
<div class="root">Loading...</div>

<div id="root">
  <!-- 这里画一个 SVG -->
</div>

使用 html-webpack-plugin 自动插入 loading：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

// 读取写好的 loading 态的 html 和 css
var loading = {
  html: fs.readFileSync(path.join(__dirname, './loading.html')),
  css: '<style>' + fs.readFileSync(path.join(__dirname, './loading.css')) + '</style>',
};

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),

    filename: 'index_bundle.js',
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'xxxx.html',
      template: 'template.html',
      loading: loading,
    }),
  ],
};

<!-- 在模板中引用 -->
<!DOCTYPE html>

<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.loading.css %>
  </head>

  <body>
    <div id="root"><%= htmlWebpackPlugin.options.loading.html %></div>
  </body>
</html>

使用 SplitChunksPlugin 自动拆分业务基础库

编译到 ES2015+ 提升代码运行效率

大多数项目的做法是，编写 ES6+ 的代码，然后在构建时编译到 ES5 运行，不仅体积大，而且运行速度慢
大部分现代浏览器已经原生支持 ES6+
把代码编译到 ES6+，然后为少数使用老旧浏览器的用户保留一个 ES5 标准的备胎即可
使用 <script type="module">，支持这个的浏览器必然支持 ES6，不支持 type module 的浏览器会因为无法识别这个标签，而不去加载

老旧浏览器无法识别 nomodule 属性，会自动忽略，从而加载 ES5 标准的代码

<script type="module" src="main.js"></script>
<script nomodule src="main.es5.js"></script>

骨架屏、react-placeholder 提前撑开页面布局

避免出现闪屏