当前位置:主页 > 分布式数据库 > 安全市场 >

数据库_域名备案需要多久_安全稳定

数据库_域名备案需要多久_安全稳定

在这个博客中,我们将看看building,Component的用法-预加载.js

SAPUI5应用程序采用MVC模式构建,因此由多个文件组成,如视图或控制器,带有片段,可以将视图的部分进一步拆分为较小的逻辑单元。

虽然在开发过程中,基于功能有很多不同的文件是好的,但在生产服务器上运行时是不好的。每个必要的文件都会触发一个单独的网络请求。您必须等到所有网络请求完成后,应用程序才能使用。你可能不会注意到你公司网络中的延迟[我的情况不是这样:P],但你会注意到在一个中等连接速度的手机上的延迟。

要解决这个问题,你可以将不同的文件打包成一个文件,这个过程称为捆绑。通过捆绑,你的应用程序只需加载一个文件,而不是所有单独的文件文件,这会加快应用程序的加载时间,因为应用程序只需等待一个文件加载即可。

在SAPUI5中,这个文件称为组件-预加载.js . 此文件包含应用程序的所有代码的缩微版本。缩小意味着删除所有不必要的空白和注释,这也减少了文件大小。另外,javascript源代码也很难看。Ugification意味着您的源代码将不像以前那样可读。

通过Grunt任务运行程序缩小

您可以通过Grunt任务缩小SAPUI5应用程序源代码。Grunt任务名为openui5\u preload在名为Grunt-openui5的节点包管理器(NPM)中。

Grunt是基于节点.js. 任务运行程序可以运行某些任务,如linting、minification、bundling、executing unit tests。任务执行者的想法是自动化重复的工作节点.js设置

设置节点.js很简单:

*NPM是自动安装的节点.js*

Grunt安装

现在您可以通过键入以下命令从命令行全局安装Grunt命令行工具NPM包(-g参数代表全局):

NPMinstall-g grunt cli

运行install命令后,您应该会看到类似的输出,如下所示。这就完成了节点.js和咕噜设置。

现在你知道咕噜任务运行程序和节点.js, 让我们深入到一个例子中来看看任务的执行情况。

创建Gruntfile.js文件以及包.json用鼠标右键点击项目名称来手动操作。

应用程序的结构如下图所示,同时请注意Gruntfile.js文件以及包.json文件

Gruntfile.js文件包含缩小SAPUI5应用程序的任务,以及包.json包含所有必需的模块。

当您运行此应用程序并查看Google Chrome的"网络"选项卡时,您将看到单独请求的应用程序工资卡文件。

Gruntfile.js文件

现在让我们看看Gruntfile.js文件

内部grunt.initConfig文件是一个配置对象dir,它引用名称webapp的名称(即Projectname–Salarycard)和目标文件夹的名称dist任务:复制复制任务负责将所有文件复制到dist文件夹清除任务删除dist文件夹中的所有文件。

SAPUI5应用程序的实际缩小在openui5\U预加载中发生。要配置任务,物联网的应用,需要为应用程序的命名空间提供前缀设置,为组件提供组件设置。cwd属性定义应用程序的根目录。

在src中,我们列出了所有默认设置。当您想包含其他文件或排除某些文件时,您必须设置src属性并列出所有需要的文件设置。如果如果使用src属性,src属性的默认设置将被忽略。这意味着如果您忘记列出'*/*'。查看.xml,则视图文件将不再缩小。

咕噜声.loadNpmTasks加载各种插件,如用于清理目录的grunt contrib clean或用于缩小目录的grunt-openui5应用程序。那些任务需要不同的配置设置,比如openui5\u预加载:{。},这是我们之前在grunt中定义的,initConfig({。})

最后,你会看到咕噜声。寄存器任务. 这里,我们登记两个任务:生成和默认值。在命令行中键入"grunt"时,大数据的4,将运行默认任务(节点.js命令行)

包.json

这是包.json文件代码看起来像

名称:

描述:

作者:

我们在devDependencies中列出了grunt-openui5或grunt contrib clean等依赖项设置。这个你的意思是这些软件包只在应用程序开发期间需要,在生产模式下运行时不需要。

现在,打开命令行并切换到Salarycard目录,在命令行内键入"npm install"。正如您在下面的屏幕截图中看到的,所有必需的依赖项都已安装。

运行NPM install命令:

现在,所有列出的依赖项都已安装在包.json安装在node_module文件夹中,物联网协议,如下图

所示,检查node_module文件夹中的以下文件,现在无需深入

运行Grunt

,在命令行中键入"grunt"开始缩小过程。当您查看项目内部时,大数据说,现在将看到包含组件.preload.js文件如下所示。

带组件的dist文件夹-预加载.js文件

下图显示了该组件的摘录-预加载.js文件,其中所有应用程序文件都列为模块,并包含在缩小的源代码中。

现在,移动组件-预加载.js文件从dist文件夹转到应用程序的WebContent文件夹。

下面是移动组件后的文件夹结构-预加载.js将文件放入WebContent文件夹。

现在,我们将打开组件-预加载.js更改文件路径以正确加载。

更改前:

更改组件后-预加载.js文件如下所示[WebContent removed]。由于我们在开发过程中从未提供过WebContent文件夹路径

如果您在Google Chrome中再次运行应用程序并再次检查网络跟踪,你会看到那个组件-预加载.js而不是下面屏幕截图中显示的所有单独文件。

前后比较:

我们可以观察到组件加载后请求数减少到25个-预加载.js文件

猜你喜欢

微信公众号