Question

代码分离（Code Splitting) 够把代码分离到不同的 bundle 中，然后可以按需或并行加载。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。

示例：

import { createElement } from 'rax';
import useImport from 'rax-use-import';

export default function App() {
  const [Bar, error] = useImport(() => import(/* webpackChunkName: "bar" */ './Bar'));
  if (error) {
    return <p>error</p>;
  } else if (Bar) {
    return <Bar />
  } else {
    return <p>loading</p>;  
  }
}

工程中默认的代码分离

我们为您工程中的页面级组件（app.json 中配置的页面组件）自动开启了代码分离。
例如： pages/Home/index 会按需加载

{
  "routes": [
    {
      "path": "/",
      "component": "pages/Home/index"
    }
  ]
}

参考： https://webpack.js.org/guides/code-splitting/