脚本宝典收集整理的这篇文章主要介绍了

react 实现页面代码分割、按需加载

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

虽然一直有做 react 相关的优化,按需加载、dll 分离、服务端渲染,但是从来没有从路由代码分割这一块入手过,昨天在本地开发时没有测试成功,今天又搞了下,已经部署到线上环境了,今天就这个记录一下。

修改配置

  • 开发环境:webpack@v3react-router@v4
  • 安装依赖:

    $ yarn add babel-plugin-syntax-dynamic-import -dev
  • 修改 .babelrc 文件:在 plugins 中添加 "syntax-dynamic-import"

改造项目代码

  • 安装依赖:

    $ yarn add react-loadable
  • 根据 react-loadable 文档提示,我们需要提供一个载入新页面时的 Loading 组件,同时对加载和超时状态进行区别提示: