CN115202630B - 一种基于web前端工程的脚手架构建方法 - Google Patents

Abstract

本发明涉及一种基于web前端工程的脚手架构建方法，包括如下步骤：S1、对需要集成的插件进行测试并推送至镜像中；S2、编译过程中，使用了node.js中的ftp‑deploy来做自动编译打包，当执行yarn build之后，将自动将文件打包放到测试服务器的指定根目录之下；S3、通过执行yarn build的命令的方式对arges‑ftp工具包做打包，跟内网服务器关联在一起。该构建方案中集成更多的基础功能和支持，不再为相同的基础的业务功能重复造轮子，即开即用，简化开发流程，能够实现前端多人协同开发、高效便捷。

Description

一种基于web前端工程的脚手架构建方法

技术领域

本发明属于计算机软件开发web前端领域，具体涉及一种基于web前端工程的脚手架构建方法。

背景技术

传统的方式，逐一引入工具包，这种方式如果项目做大了比较复杂，不利于项目以后的扩展迭代。原本的项目，项目体积比较庞大，没有对打包的依赖做体积上的管理。原有项目上，大量的使用的类组件，有复杂的生命周期函数和堆栈问题，一旦碰到复杂的业务功能时，容易出现内存溢出问题，新脚手架，完全摒弃了这种设计方式，提倡使用函数组件进行开发迭代。

传统技术中至少存在如下不足：

1、大规模使用类组件，生命周期太多了，碰到复杂的业务逻辑，代码量会很庞大，并且程序里会出现大量的this关键字，无法保证this指向的准确性的情况下，容易产生bug，代码健壮性差，可重用性差。

2、压缩包体积太大了，公司的项目有不同的版本分支，将node_module做压缩放在仓库当中，时间一长，分支一多就导致仓库体积过于庞大。

3、比较难整合一些生态比较好的新概念组件和方法，现有的脚手架系统都对版本低的react支持性不好，想要引入新的特性进来难度大。

发明内容

有鉴于目前npm社区良莠不齐，恶意包频出、无法确保依赖包能够稳定运行的不足，本发明的目的在于克服现有相关技术的不足，提供基于web前端工程的脚手架构建方法，一款现代化、快速、高效便捷的应用开发骨架，一个基于umi3.js的快速开发驱动，该构建方案中集成更多的基础功能和支持，不再为相同的基础的业务功能重复造轮子，即开即用，简化开发流程，能够实现前端多人协同开发、高效便捷。

为实现上述目的，本发明采用的技术方案为：一种基于web前端工程的脚手架构建方法，包括如下步骤：

S1、对需要集成的插件进行测试并推送至镜像中；

S2、编译过程中，使用了node.js中的ftp-deploy来做自动编译打包，当执行yarnbuild之后，将自动将文件打包放到测试服务器的指定根目录之下；

S3、通过执行yarn build的命令的方式对arges-ftp工具包做打包，跟内网服务器关联在一起。

进一步的，插件工具包括ts工具集、同步插件、内部组件库和数据流工具。

进一步的，在步骤S1对需要集成的插件进行测试并推送至镜像中的具体步骤为：

S11、安装node.js，关联NPM镜像源；

NPM需要依赖node.js环境的，先安装yarn关联NPM镜像；

S12、创建本地的NPM包；

在本地使用npm init -y创建一个包，并且填写好配置信息，所述配置信息包括所有的包依赖信息，所述包依赖信息包括了包名、版本、作者、git资源库地址、关键词和证书中的一种信息或者两种以上组合信息，最后会生成package.json公共配置文件；

S13、对一个以上的插件进行编译；

S14、发布NPM包，使用link测包；

对插件编码工作完成之后形成对应的预发行包，需要对要预发行包进行测试，使用yarn link或者npm link建立软连接，需要使用jest做单元测试；

S15、引入预发行包；

最后要通过CI/CD的流程去发行预发行包，使用npm publish将预发行包推到镜像中。

进一步的，分别对ts工具集、同步插件、内部组件库和数据流工具进行编译，编译完成之后执行步骤S13和步骤S14。

进一步的，ts工具集和数据流工具，跨项目使用时需要使用内部镜像挂载依赖包，在项目中使用时yarn add xxxx 来进入内部依赖，其中xxxx代表预发行的包名。

进一步的，在步骤S2的具体实现步骤包括如下：

S21、webpack环境中配置信息；

需要在webpack的配置文件中填好ftp目标地址，端口，账号密码，端口、路径和文件。

S22、服务器上执行打包命令；

在服务器上执行yarn build 将文件输出之后，会将打包出来的目标文件自动传输到测试服务器当中。

S23、使用node.js的ftp-deploy模块，文件上传到服务器上；

使用了node.js的ftp-deploy模块，实现文件IO操作；

S24、清理浏览器缓存，浏览器打开之后自动更新完毕。

进一步的，本构建方法的执行工作流程如下：

第一步：umi.js会对项目种的所有静态资源进行预编译处理，site就是静态的站点信息，包含了应用开发大部分html模板文件，离线包是项目中携带的依赖包，存放在node_module中，assets是项目的静态资源，有less文件，图片，图标，各种外部js文件之类的，模板文件是react默认使用的index文件，webpack执行打包之后，会自动映射指向这个文件；

第二步：项目所产生的一系列依赖资源，有内部资源和外部资源，统一使用注册的方式捆绑在一起，jest是单元测试工具，用来测试某个组插件或者函数，antd是一个大型的UI组件库，react是一个渐进式的开发框架，dva是数据流工具，用来共享组件的公用数据流，babel是一个翻译器解释器，将react中的jsx语言翻译成浏览器可以执行的语言；

第三步：输出的工作，首先对内会静态打包出.umi和.umi-core，其为umi中的缓存文件，用来提高编译效率的文件，避免重复的去读取配置文件，使对内的应用具有，约定式配置，程序模块化，css模块，路由模块化的特征，这些模块化实现了框架当中可插拔的思想，dva实现了兄弟组件，父子组件，嵌套复杂组件当中数据传递的问题，还支持使用服务端渲染去提高性能；

第四步：实现层当中，af-webpack的功能点是获取webpack的配置，启动本地调试，监听配置比文件的变化，.umi-test实际上是做了静态缓存，一部分是src目录下的文件缓存，另外一部分是public目录下的静态资源缓存，使用缓存，项目的重启速度提高，.babel-config-umi是用来加载css资源和js资源的；

第五步：是一个翻译器，使用webpack5对外输出到react应用，或者react-native移动端开发应用，会通过哈希加密的形式编译出js文化和html文件，实际上就是走到了所谓的应用层，这个时候umi内置的方法，支持动态加载，错误边界，路由分发，模块化之类的，更加容易实现业务需求。

进一步的，本构建方案中使用less模块化做css，做了预打包处理，umi首先会对路由和插件进行打包，生产一份路由配置，再把css、js串联起来，静态输出。

进一步的，对内输出的内容包括umi和umi-core、约定配置、性能配置、服务端渲染、css模块化、路由和缓存。

进一步的，本构建方案中支持动态按需加载组件资源，不加载的资源不计入编译当中，内置封装了异步组件dynamic，将所有的小组件全部分块做成dynamic的形式；当要处理图标类的需求的时候，不需要将所有的组件全部加载呈现给用户。

本发明采用以上技术方案，具体如下有益效果：

1、通过ts工具集来约束开发者的一些行为，提高了开发效率，规范了前端开发团队的开发流程，所有的开发统一采用了一套标准，数据流工具简化，使用hooks做代码简化，性能得到优化，开发变得简单灵活。

2、实现了可插拔的思想，比较方便扩展或者是删除某个插件，或者是针对某个部分的组件进行升级。

3、实现了便捷性的打包思想，打包之后自动同步到测试环境，无需人工在执行迁移命令。

附图说明

为了更清楚地说明本发明或相关技术中的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明于web前端工程的脚手架构建方法流程图；

图2是本发明集成的工具和插件进行测试并推送至镜像的流程图；

图3是本发明编译打包文件之后上传服务器流程图；

图4是本发明UMI执行工作原理流程图；

图5是本发明应用架构流程示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

请参阅图1，本实施例提供一种基于web前端工程的脚手架构建方法，包括如下步骤：

S1、对需要集成的插件进行测试并推送至镜像中；

S2、编译过程中，使用了node.js中的ftp-deploy来做自动编译打包，当执行yarnbuild之后，将自动将文件打包放到测试服务器的指定根目录之下；

S3、通过执行yarn build的命令的方式对arges-ftp工具包做打包，跟内网服务器关联在一起。

本实施例中需要补充说明的是，本发明中的插件包括ts工具集、同步插件、内部组件库和数据流工具。ts工具集和数据流工具，跨项目使用时需要使用内部镜像挂载依赖包，在项目中使用时yarn add xxxx 来进入内部依赖，其中xxxx代表预发行的包名。

如图2所示，作为一种优选的实施方式，本实施例中在步骤S1对需要集成的工具和插件进行测试并推送至镜像中的具体步骤为：

S11、安装node.js，关联NPM镜像源；

NPM需要依赖node.js环境的，先安装yarn关联NPM镜像；

S12、创建本地的NPM包；

在本地使用npm init -y创建一个包，并且填写好配置信息，所述配置信息包括所有的包依赖信息，所述包依赖信息包括了包名、版本、作者、git资源库地址、关键词和证书中的一种信息或者两种以上组合信息，最后会生成package.json公共配置文件；

S13、对一个以上的工具和插件进行编译；

S14、发布NPM包，使用link测包；

对插件编码工作完成之后形成对应的预发行包，需要对要预发行包进行测试，使用yarn link或者npm link建立软连接，需要使用jest做单元测试；

S15、引入预发行包；

最后要通过CI/CD的流程去发行预发行包，使用npm publish将预发行包推到镜像中。

需要补充说明的是，本实施例中分别对ts工具集、同步插件、内部组件库和数据流工具进行编译，编译完成之后执行步骤S13和步骤S14。

如图3所示，作为一种优选的实施方式，在步骤S2的具体实现步骤包括如下：

S21、webpack环境中配置信息；

需要在webpack的配置文件中填好ftp目标地址，端口，账号密码，端口还有路径，还有包含的文件。

S22、服务器上执行打包命令；

在服务器上执行yarn build 将文件输出之后，会将打包出来的目标文件自动传输到测试服当中。

S23、使用node.js的ftp-deploy模块，文件上传到服务器上；

使用了node.js的ftp-deploy模块，实现文件IO（输入/输出）操作。

S24、清理浏览器缓存，浏览器打开之后自动更新完毕。

如图4所示，本实施例中提供了UMI执行工作原理流程图：

第一步：首先部署资源，umi.js会对项目种的所有静态资源进行预编译处理，site就是静态的站点信息，包含了应用开发大部分html模板文件，离线包是项目中携带的依赖包，存放在node_module中，assets是项目的静态资源，有less文件，图片，图标，各种外部js文件之类的，模板文件是react默认使用的index文件，webpack执行打包之后，会自动映射指向这个文件，我们的内部组件，比如arges-ftp，arges-clib等经过yarn add的命令引入到工程当中之后，也会存放到node_module当中。

第二步：项目所产生的一系列依赖资源，有内部资源和外部资源，统一使用注册的方式捆绑在一起，jest是单元测试工具，用来测试某个组件或者函数，antd是一个大型的UI组件库，react是一个渐进式的开发框架，dva是数据流工具，用来共享组件的公用数据流，babel是一个翻译器解释器，将react中的jsx语言翻译成浏览器可以执行的语言。react-router，是一个前端的路由组件，用于监听页面URL的变化，获取URL路由匹配等，用来管理项目中的全局路由。

第三步：就是输出的工作，首先对内会静态打包出.umi和.umi-core，它们是umi中的缓存文件，用来提高编译效率的文件，避免重复的去读取配置文件，使对内的应用具有，约定式配置，程序模块化，css模块，路由模块化的特征，这些模块化就实现了框架当中可插拔的思想，dva实现了兄弟组件，父子组件，嵌套复杂组件当中数据传递的问题，还支持使用服务端渲染去提高性能。

第四步：实现层当中，af-webpack的功能点是获取webpack的配置，启动本地调试，监听配置比文件的变化，.umi-test实际上是做了静态缓存，一部分是src目录下的文件缓存，另外一部分是public目录下的静态资源缓存，使用缓存，项目的重启速度提高，.babel-config-umi是用来加载css资源和js资源的；

第五步：，是一个翻译器，使用webpack5对外输出到react应用，或者react-native移动端开发应用，会通过哈希加密的形式编译出js文化和html文件，实际上就是走到了所谓的应用层，这个时候umi内置的方法，支持动态加载，错误边界，路由分发，模块化之类的，更加容易实现业务需求。

优选的，本构建方案中使用less模块化做css，做了预打包处理，umi首先会对路由和插件进行打包，生产一份路由配置，再把css、js串联起来，静态输出。

需要补充说明的是：对内输出的内容包括umi和umi-core、约定配置、性能配置、服务端渲染、css模块化、路由和缓存。

优选的，本构建方案中支持动态按需加载组件资源，不加载的资源不计入编译当中，内置封装了异步组件dynamic，将所有的小组件全部分块做成dynamic的形式；当要处理图标类的需求的时候，不需要将所有的组件全部加载呈现给用户。

如图5所示，先对本构建方法的应用架构流程做说明如下：

框架说明：将框架命名为argesFrame1.0.0，框架的核心的如上图所示，下面对以上的功能和作用进行描述。

Husky:是一个代码风格检查工具，eslint只能保证编码过程中纠错，在代码进入提交到服务器的流程之前，husky会自动检测代码风格的合理性，如果不符合约定的代码规范，将会退回开发者的工作区，视为这次代码提交工作是无效的，有效的维护了程序质量和代码协同。

Arges-libs:使用typescript编写的程序工具集合，内置了许多开发中常见的函数和通用处理方法，避免重复的去造轮子，里面包含了函数，数组，对象，数据类型，防抖节流，正则表达式，日期等工具的处理。

Arges-ftp:这是一个封装的文件同步插件，跟命令yarn build捆绑在一起，当执行yarn build的时候，会生产一个dist文件，执行迁移命令，将dist文件同步到测试服务器上，安装的方式，同arges内部组件库一样，使用yarn add 引入到工程当中。

Arges-clib:这是一个内部的组件库，公司内部的项目，可能复用性很高或者共性很高，这个时候可以抽象出来做为通用的组件，在其他的项目引入，有效的提高开发效率，进一步增强代码质量。

Arges-store：数据流工具，相当于一个前端的数据仓库，基于react-redux实现的，支持兄弟，子孙，父子组件或者嵌套复杂组件关系的数据传递，如果使用以往的方式，数据传递关系混乱，较容易出bug，这个时候，有了这个工具将事半功倍。

Antd-design：UI库，项目的UI都是基于ANTD实现的，内置丰富的组件和图标等。

Qiankun.js:微前端解决方案，做为将来扩展使用的，本版本预留，将不同的子项目，抽成一个个通用的服务，跟主项目关联起来做分发器，用架构的方式实现多服务项目同步的问题。

Servers层：数据流注册初始化对象的文件，都在这里面，所有需要交互的数据流都存放在目录中。

Api层：后端给到前端所有的接口对象层，全部抽象到目录中，需要用的时候，引入进来。

Components：项目中通用的组件，比如页头页尾，菜单栏之类的，都可以抽象成通用的组件，封装在该目录中。

Config:项目的参数配置文件，有些通用的参数，特殊的表达式值的封装。

Enums存放所有的枚举对象类型；Hooks(通用hooks钩子)存放所有通用的自定义函数钩子。

Pages：项目核心的页面代码文件，其实就是视图层。

Mocks：模拟数据层，当后端没给数据接口时，需要前端人工模拟数据，使用mocks封装。

本发明提供的脚手架构建方法中，整体逻辑步骤的组合解决了现有技术中存在的不足，带来了充分的有益效果。本发明的逻辑实现方式目前暂未有相关的在先专利披露，本发明提供的基于web前端工程的脚手架构建方法，通过eslint，husky或者是ts来约束开发者的一些行为，提高了开发效率，规范了前端开发团队的开发流程，所有的开发统一采用了一套标准，数据流工具简化，使用hooks做代码简化，性能得到优化，开发变得简单灵活。实现了可插拔的思想，比较方便扩展或者是删除某个插件，或者是针对某个部分的组件进行升级。实现了便捷性的打包思想，打包之后自动同步到测试环境，无需人工在执行迁移命令。本构建方法应用于软件开发web前端领域，基于react16.8+hooks+umi.js，由于npm社区良莠不齐，恶意包频出，无法确保依赖包能够稳定运行，umi通过了写死版本，使用了预打包处理，加上了lock锁定了eslint和babel，保证了项目稳定运行和可插拔的思想，后续好扩展，引入图标，国际化，微前端之类的迭代都能有一个比较平滑的过度。

本脚手架应用开发骨架有极强的可扩展性，应用化，模块化，支持敏捷开发，区分了框架目录和功能，功能和业务直接是隔离的，api(所有的接口方法)，assets(资源文件)，components（公共组件），layouts(布局文件)，models(数据流文件)，hooks(通用的hooks函数)，utils（自定义工具类，enums(枚举类)，mocks(模拟数据)，service(业务逻辑抽象层)。

本构建方法实现了约定大于配置的思想，任何的路由配置，图标资源配置，入口文件，静态资源输出，权限相关的，404403系列的文件，全部通过约定的方式来实现，无需额外的编码或者使用webpack去解决。全面监控js报错，引入了“错误边界”的概念，方便定位错误信息，有完善的错误类型追踪。整合了数据流工具，基于react-redux，避免重复的调用数据流，减少代码的复杂程度，支持同步和异步，上下文，日志调试等，全面的追踪数据流信息，方便找到错误。

使用了MFSU的方案，有缓存的时候，平均启动时间大概是1s-5s，热更新大概在300ms左右，这一点基于了webpack5，也能够开启SSR，在生产环境下也能快速编译执行，效率提升十倍左右。

支持内置版的icons，埋点，国际化等，使用了less模块化做css，，做了预打包处理，umi首先会对路由和插件进行打包，生产一份路由配置，再把css，js等串联起来，静态输出。

本构建方法提供了一种前端多人协同开发高效便捷的，可插拔性较高的一个脚手架，使用umiJs构建应用，所有的依赖都以工具集的形式通过babel的形式绑定，内置路由，构建，部署，测试，lint等。将项目开发中常见的逻辑都封装起来，代码干净，不依赖第三方库和依赖包，最大程度的减轻项目打包体积，使用ts封装了常用的工具集和数据流工具。代码的可复用性很高，方便扩展迭代，遵守一套相同的lint和编码风格。本实施例中的的数据流工具，统一使用公共的数据流工具做数据仓库存储，解决兄弟，子孙组件的数据传递问题，支持同步和异步两种方式。

本发明实施例旨在涵盖落入所附权利要求的宽泛范围之内的所有这样的替换、修改和变型。因此，凡在本发明实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种基于web前端工程的脚手架构建方法，其特征在于：包括如下步骤：

S1、对需要集成的插件进行测试并推送至镜像中；

S2、编译过程中，使用node.js中的ftp-deploy来做自动编译打包，当执行yarn build之后，将自动将文件打包放到测试服务器的指定根目录之下；

S3、通过执行yarn build的命令的方式对arges-ftp工具包做打包，跟内网服务器关联在一起；

在步骤S1对需要集成的插件进行测试并推送至镜像中的具体步骤为：

S11、安装node.js，关联NPM镜像；

NPM需要依赖node.js环境的，先安装yarn关联NPM镜像；

S12、创建本地的NPM包；

在本地使用npm init -y创建一个包，并且填写好配置信息，所述配置信息包括所有的包依赖信息，所述包依赖信息包括了包名、版本、作者、git资源库地址、关键词和证书中的一种信息或者两种以上组合信息，最后会生成package.json公共配置文件；

S13、对一个以上的插件进行编译；

S14、发布NPM包，使用link测包；

对插件编码工作完成之后形成对应的预发行包，需要对要预发行包进行测试，使用yarn link或者npm link建立软连接，需要使用jest做单元测试；

S15、引入预发行包；

最后要通过CI/CD的流程去发行预发行包，使用npm publish将预发行包推到镜像中。

2.根据权利要求1所述的基于web前端工程的脚手架构建方法，其特征在于：插件工具包括ts工具集、同步插件、内部组件库和数据流工具。

3.根据权利要求1所述的基于web前端工程的脚手架构建方法，其特征在于：分别对ts工具集、同步插件、内部组件库和数据流工具进行编译，编译完成之后执行步骤S13和步骤S14。

4.根据权利要求1所述的基于web前端工程的脚手架构建方法，其特征在于：ts工具集和数据流工具，跨项目使用时需要使用内部镜像挂载依赖包，在项目中使用时yarn addxxxx 来进入内部依赖，其中xxxx代表预发行的包名。

5.根据权利要求1所述的基于web前端工程的脚手架构建方法，其特征在于：在步骤S2的具体实现步骤包括如下：

S21、webpack环境中配置信息；

需要在webpack的配置文件中填好ftp目标地址，端口，账号密码，端口、路径和文件；

S22、服务器上执行打包命令；

在服务器上执行yarn build 将文件输出之后，会将打包出来的目标文件自动传输到测试服务器当中；

S23、使用node.js的ftp-deploy模块，文件上传到服务器上；

使用了node.js的ftp-deploy模块，实现文件IO操作；

S24、清理浏览器缓存，浏览器打开之后自动更新完毕。

6.根据权利要求1至5任一项所述的基于web前端工程的脚手架构建方法，其特征在于：本构建方法的执行工作流程如下：

第一步：umi.js会对项目种的所有静态资源进行预编译处理，site就是静态的站点信息，包含了应用开发大部分html模板文件，离线包是项目中携带的依赖包，存放在node_module中，assets是项目的静态资源，有less文件，图片，图标，各种外部js文件之类的，模板文件是react默认使用的index文件，webpack执行打包之后，会自动映射指向这个文件；

第二步：项目所产生的一系列依赖资源，有内部资源和外部资源，统一使用注册的方式捆绑在一起，jest是单元测试工具，用来测试某个组插件或者函数，antd是一个大型的UI组件库，react是一个渐进式的开发框架，dva是数据流工具，用来共享组件的公用数据流，babel是一个翻译器解释器，将react中的jsx语言翻译成浏览器可以执行的语言；

第三步：输出的工作，首先对内会静态打包出.umi和.umi-core，其为umi中的缓存文件，用来提高编译效率的文件，避免重复的去读取配置文件，使对内的应用具有，约定式配置，程序模块化，css模块，路由模块化的特征，这些模块化实现了框架当中可插拔的思想，dva实现了兄弟组件，父子组件，嵌套复杂组件当中数据传递的问题，还支持使用服务端渲染去提高性能；

第四步：实现层当中，af-webpack的功能点是获取webpack的配置，启动本地调试，监听配置比文件的变化，.umi-test实际上是做了静态缓存，一部分是src目录下的文件缓存，另外一部分是public目录下的静态资源缓存，使用缓存，项目的重启速度提高，.babel-config-umi是用来加载css资源和js资源的；

第五步：是一个翻译器，使用webpack5对外输出到react应用，或者react-native移动端开发应用，会通过哈希加密的形式编译出js文化和html文件，实际上就是走到了所谓的应用层，这个时候umi内置的方法，支持动态加载，错误边界，路由分发，模块化之类的，更加容易实现业务需求。

7.根据权利要求6所述的基于web前端工程的脚手架构建方法，其特征在于：本构建方案中使用less模块化做css，做了预打包处理，umi首先会对路由和插件进行打包，生产一份路由配置，再把css、js串联起来，静态输出。

8.根据权利要求7所述的基于web前端工程的脚手架构建方法，其特征在于：对内输出的内容包括umi和umi-core、约定配置、性能配置、服务端渲染、css模块化、路由和缓存。

9.根据权利要求8所述的基于web前端工程的脚手架构建方法，其特征在于：

本构建方案中支持动态按需加载组件资源，不加载的资源不计入编译当中，内置封装了异步组件dynamic，将所有的小组件全部分块做成dynamic的形式；当要处理图标类的需求的时候，不需要将所有的组件全部加载呈现给用户。

Images