[React 从零实践01-后台] 代码分割

作者: woow_wu7 | 来源:发表于2021-09-27 08:51 被阅读0次

[源码-webpack01-前置知识] AST抽象语法树
 [源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程
 [源码] Redux React-Redux01
[源码] axios
[源码] vuex
[源码-vue01] data响应式和初始化渲染
 [源码-vue02] computed 响应式 - 初始化，访问，更新过程
 [源码-vue03] watch 侦听属性 - 初始化和更新
 [源码-vue04] Vue.set 和 vm.$set
[源码-vue05] Vue.extend

[源码-vue06] Vue.nextTick 和 vm.$nextTick

[部署01] Nginx
[部署02] Docker 部署vue项目
 [部署03] gitlab-CI

[深入01] 执行上下文
 [深入02] 原型链
 [深入03] 继承
 [深入04] 事件循环
 [深入05] 柯里化偏函数函数记忆
 [深入06] 隐式转换和运算符
 [深入07] 浏览器缓存机制（http缓存机制）
[深入08] 前端安全
 [深入09] 深浅拷贝
 [深入10] Debounce Throttle
[深入11] 前端路由
 [深入12] 前端模块化
 [深入13] 观察者模式发布订阅模式双向数据绑定
 [深入14] canvas
[深入15] webSocket
[深入16] webpack
[深入17] http 和 https
[深入18] CSS-interview
[深入19] 手写Promise
[深入20] 手写函数
 [深入21] 算法 - 查找和排序

前置知识

一些单词

automatic：自动的
delimiter：分隔符
( automaticNameDelimiter )

lighthouse：灯塔
priority：优先级

vendor: 第三方
Suspense：悬念，悬停
fallback：退路

(1) 为什么要做代码分割

( A文件 ) 分割成 ( B文件，C文件 )
加载一个2MB的文件A，和加载两个1MB的文件B和C，由于存在异步加载并行加载，所以分割后可能加载速度更快
当修改代码时，不做代码分割，只修改一小部分就会重新打包整个文件A，生成新的文件A'，用户端就得从新加载整个文件A'；做代码分割后，如果修改的代码在B文件，从新打包只需要打包B文件，同时用户端也只需要重新加载B文件，C文件会被缓存
还可以做按需加载，懒加载，路由懒加载，解决白屏等，最终提升性能

(2) 代码分割的三种角度

拆分成 ( 业务代码-经常变动 ) 和 ( 第三方依赖代码-几乎不变 )
- 业务代码会随着需求迭代等不断变化，而第三方依赖包基本不变，所以可以把第三方依赖包单独拆分打包，比如叫vender.js这个包基本不变，代码发布后，在用户端不用重新加载，而是浏览器会自动缓存
根据路由进行切割，即路由懒加载
- 比如进入首页的路由时，只需要加载首页的那部分代码
- （ 首页有依赖其他模块，同步引入其实也可以在拆分成粒度更细的包，动态引入的可以通过import()函数做动态加载拆分 ）
根据组件进行切割
- 按路由方式进行代码切割，当A组件包含C组件，而B组件也包含C组件时，两个打包后的包，都会分别包含C组件的代码，造成冗余。
- 按组件方式进行代码切割，则能避免上面的问题，但是由此带来的问题就是包的数量会急剧增加，需要开发者自己衡量利弊。

(3) import(specifier) 函数

import加载模块时，不能做到像require那样的运行时加载模块，所以有了 import()函数 提案，动态加载模块
参数：模块的路径
返回值：返回一个 promise 对象
适用场合：
- 按需加载：在需要时在加载模块
- 条件加载：在if语句中做条件加载
- 动态模块路径：允许模块路径动态生成
注意点：
- import()返回的是一个promise实例对象，加载成功后，模块对象作为.then() 方法的参数，可以通过 解构赋值 获取输出接口
- 如果模块有 default 输出接口，可以通过参数直接获取default接口，即 .then(moudle => module.default)
- 通过加载多个模块
- 当 Webpack 解析到import()语法时，会自动进行代码分割。如果你使用 Create React App，该功能已开箱即用，你可以立刻使用该特性。当然也可以自己配置webpack
- 当使用 Babel 时，你要确保 Babel 能够解析动态 import 语法而不是将其进行转换。对于这一要求你需要 @babel/plugin-syntax-dynamic-import

import(/* webpackChunkName: "AsyncTest" */'../../components/async-test') 
  .then(({ default: AsyncTest }) => {
    ...
  })
  .catch(err => console.log(err))
  

异步加载，动态加载（ import() ）
- 代码拆分如何命名包名 
    1. /* webpackChunkName: "AsyncTest" */
    2. 使用插件 @babel/plugin-syntax-dynamic-import 就可以上面的 魔法注释 写法
    3. 通过 create-react-app新建的项目中 
            => babel-preset-react-app 依赖=> @babel/preset-env 依赖=> @babel/plugin-syntax-dynamic-import 
            
同步加载（ import ）
- 代码拆分如何命名包名
    1. 通过设置 optimization => splitchunks => cashGroups 来配置包名

(4) webpack => optimization

对于用webpack构建的项目
- 同步方式引入的模块( import )，做代码分割需要配置 optimization.splitchunks
- 异步方式引入的模块( import() )，不需要做任何配置
optimization.splitchunks
- automaticNameDelimiter：
  - 指定拆分出来的包的连接符，来源组名称连接符入口名称（例如vendors~main.js）
  - 默认是 ~
- maxAsyncRequests
  - 按需加载时最大的并行请求数，默认30
- maxInitialRequests
  - 入口最大并行请求数，默认30
- chunks：
  - string 或者 function
  - string时，有效值为 all，async和initial，all表示同步和异步模块都进行拆分
  - function时，可以有效的指定具体的哪些模块需要进行拆分
  - chunks 需要配合 cashGroups
- cacheGroups
  - priority：定义每个组的优先级
    - 当一个模块满足多个组规则时，该模块将被打包到 priority 高的文件中
    - number越大优先级越高，默认组的默认值是负数，自定义组的默认值是0
  - filename：打包后模块的名字
  - reuseExistingChunk：boolean
    - 如果在之前的模块中引入过该模块A，并打包了，现在又引入了模块A，就复用之前已经打包好的A
- minChunks（maxChunks）
  - 模块是否进行拆分的最小引用次数，即至少该模块被引用多少次才进行拆分
- minSize（maxSize）
  - 模块是否进行拆分的最小大小（以字节为单位）
官网说明
SplitChunksPlugin

optimization.splitchunks默认配置项如下：


module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all', // 对同步引入模块 和 异步引入模块都做代码分割，all async initial
      minSize: 20000, // 当引入的模块大小大于 20KB 时，对该模块进行代码分割
      minRemainingSize: 0,
      maxSize: 0, // 超过值后，对模块进行二次拆分
      minChunks: 1, // 引入的模块被引用一次时就进行代码分割
      maxAsyncRequests: 30, // 最大的按需(异步)加载次数，整个项目最多进行30个代码分割
      maxInitialRequests: 30, // 最大的初始化加载次数，首页最多进行30个代码分割
      automaticNameDelimiter: '~', // 打包后的名字中的连接符，组名+连接符+入口文件名
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: { // 组名称
          test: /[\\/]node_modules[\\/]/, // 匹配的范围是 node_modules
          priority: -10 // 优先级，当一个模块满足多个组规则时，该模块将被打包到 priority 高的文件中
          // filename: 'vender.js' // 指定打包后模块的名字
        },
        default: { // 引入的模块，如果不满足上面的defaultVendors组规则的模块，就会进行default组的规则匹配
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true, // 之前已经打包过该模块，就直接复用
        }
      }
    }
  }
};

(5) 错误边界

部分 UI 中的 JavaScript 错误不应该破坏整个应用程序。为了解决这个问题，React引入了 “错误边界(Error Boundaries)”

react中的代码分割实现

(1) React.lazy 和 Suspense 实现代码分割

1. React.lazy(() => import()) 参数是一个函数，函数返回值必须是一个promsie对象，React.lazy 目前仅支持默认导出
1. Suspense组件，fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

import React, { useState, Suspense } from 'react'
import { Button } from 'antd';


const Home = (props: any) => {
  console.log(props);

  const [AsyncTest, setAsyncTest] = useState<any>()
  const [AsyncTest2, setAsyncTest2] = useState<any>()

  // import()方式代码分割
  const asyncLoad1 = () => {
    import(/* webpackChunkName: "AsyncTest" */'../../components/async-test')
      .then(({ default: AsyncTest }) => {
        setAsyncTest((element: any) => element = AsyncTest)
      })
      .catch(err => console.log(err))
  }

  // React.lazy() + Suspense 方式代码分割
  const asyncLoad2 = () => {
    const Test2 = React.lazy(() => import(/* webpackChunkName: "AsyncTest2" */'../../components/async-test2'))
    setAsyncTest2((component: any) => component = Test2)
  }

  return (
    <div>
      <header>home page bigscreen</header>

      <Button onClick={() => {
        asyncLoad1();
        asyncLoad2()
      }}>异步加载</Button>

      {AsyncTest ? AsyncTest() : null}
      {/* {AsyncTest ? <AsyncTest />: null} */}

      <Suspense fallback={<div>Loading...</div>}>
        {AsyncTest2 ? <AsyncTest2 /> : null}
      </Suspense>
    </div>
  )
}

export default Home

(2) 基于路由的代码分割（React.laze）（Suspense）（react-router-config）

和vue类似

React.lazy   Suspense   react-router-config


routes.js------------------
const Login = lazy(() => import(/* webpackChunkName: 'Login' */'../pages/login'))
const HomeBigScreen = lazy(() => import(/* webpackChunkName: 'HomeBigScreen' */'../pages/home/bigscreen.home'))
const HomeAdmin = lazy(() => import(/* webpackChunkName: 'HomeAdmin' */'../pages/home/admin.home'))
const Layout = lazy(() => import(/* webpackChunkName: 'Layout' */'../pages/layout'))
const routes: RouteModule[] = [
  {
    path: '/login',
    component: Login,
  },
  {
    path: '/',
    component: Layout,
    routes: [ // -------------------------------------------------------- 嵌套路由
      {
        path: '/home-bigscreen',
        exact: true,
        component: HomeBigScreen,
      },
      {
        path: '/home-admin',
        exact: true,
        component: HomeAdmin,
      },
    ]
  }
]


router.js------------------
import { renderRoutes } from 'react-router-config' //--------------------- react-router-config集中式路由解决方案
const Router = () => {
  return (
    <Suspense fallback={<div>loading...</div>}> //------------------------ Suspense包裹lazy，Suspense.fallback
      <Switch>
        {renderRoutes(routes)}
      </Switch>
    </Suspense>

  )
}


layout.js----------------
const render = () => {
    if (systemType === SYSTEMTYPE.ADMIN) {
      return (
        <div className={styles.layoutAdmin}>
          <header className={styles.header}>layout page admin</header>
          {renderRoutes(props.route.routes)} //--------------------------- renderRoutes(props.router.routes)
        </div>
      )
    } else {
      return (
        <div className={styles.layoutBigScreen}>
          {renderRoutes(props.route.routes)}
        </div>
      )
    }
  }

(3) 基于路由的代码分割（第三方库 react-loadable）

https://github.com/jamiebuilds/react-loadable

项目源码

资料

官网教程: https://www.html.cn/create-react-app/docs/code-splitting/
react中做代码分片：https://juejin.im/post/6844903953721737224#heading-1

[React 从零实践01-后台] 代码分割

导航

前置知识

一些单词

(1) 为什么要做代码分割

(2) 代码分割的三种角度

(3) import(specifier) 函数

(4) webpack => optimization

(5) 错误边界

react中的代码分割实现

(1) React.lazy 和 Suspense 实现代码分割

(2) 基于路由的代码分割（React.laze）（Suspense）（react-router-config）

(3) 基于路由的代码分割（第三方库 react-loadable）

项目源码

资料

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读