How to make a release version of SAP UI5 including component-preload.js

A set of step-by-step learning tutorials for SAP UI5 beginners

Tutorial Directory

• The construction of SAP local development environment1621e2df5bbefd
• of the SAP UI5 application development tutorials: Hello World
• SAP UI5 Application Development Tutorial 2: Bootstrap of SAP UI5 Bootstrap
• SAP UI5 Application Development Tutorial No. 3: Getting Started with the First SAP UI5 Control
• SAP UI5 Application Development Tutorial No. 4: A Preliminary Study of XML Views
• SAP UI5 Application Development Tutorial No. 5: A Preliminary Study of View Controller
• SAP UI5 application development tutorial six - understand the concept of module (Module) of SAP
• SAP UI5 Application Development Tutorial No. 7 - A Preliminary Study of JSON Model
• SAP UI5 Application Development Tutorial No. 8 - Multilingual
• SAP UI5 Application Development Tutorial No. 9 - Creating the First Component
• SAP UI5 Application Development Tutorial No. 10 - What is the Descriptor of SAP UI5 Application Descriptor
• SAP UI5 Application Development Tutorial Eleven: SAP UI5 Container Class Controls Page and Panel
• SAP UI5 Application Development Tutorial Twelve - Use CSS Classes to Further Beautify
• SAP UI5 Application Development Tutorial Thirteen - How to Add Custom CSS Classes
• SAP UI5 Application Development Tutorial No. 14 - How to Use Embedded Views
• SAP UI5 Application Development Tutorial No. 15 - How to Use Dialog Boxes and Fragments
• SAP UI5 application development tutorial sixteen - the use of icon
• SAP UI5 Application Development Tutorial No. 17 - Use of Aggregate Binding in UI5 Composite Controls
• SAP UI5 Application Development Tutorial No. 18 - Special symbols in SAP UI5 data binding syntax, as well as a detailed explanation of absolute binding and relative binding concepts
• SAP UI5 Application Development Tutorial No. 19 - SAP UI5 Data Types and Complex Data Binding
• SAP UI5 Application Development Tutorial Twenty-Explanation of Expression Binding Usage in SAP
• SAP UI5 Application Development Tutorial Part 21 - Custom Formatter for
• SAP UI5 Application Development Tutorial No. 22 - Development and Use of
• SAP UI5 Application Development Tutorial No. 23 - Sorting and Grouping of List Controls
• SAP UI5 Application Development Tutorial Part 24 - How to Use OData Data Model
• SAP UI5 Application Development Tutorial Part 25 - Using a Proxy Server to Solve the Cross-Domain Problem of SAP UI5 Application Accessing Remote OData Services
• SAP UI5 Application Development Tutorial No. 26 - Detailed explanation of the use steps of OData service with Mock server
• SAP UI5 Application Development Tutorial Part 27 - Introduction to , a Unit Testing Tool for SAP UI5 Applications1621e2df5bc3dd
• SAP UI5 Application Development Tutorial No. 28 - Introduction to OPA, an Integration Testing Tool for SAP
• SAP UI5 Application Development Tutorial No. 29 - Introduction to the Routing and Navigation Functions of SAP
• SAP UI5 Application Development Tutorial Thirty - Parameter Passing During the Routing Process of SAP
• SAP UI5 Application Development Tutorial No. 31 - Routing back and history of
• SAP UI5 Application Development Tutorial No. 32 - How to Create a Custom SAP
• SAP UI5 Application Development Tutorial No. 33 - Responsiveness of SAP UI5 Applications
• SAP UI5 application development tutorial thirty-four - SAP UI5 application based on device type page adaptation function (Device Adaptation)
• SAP UI5 Application Development Tutorial No. 35 - How to Deploy a Locally Developed SAP UI5 Application to the ABAP Server
• SAP UI5 Application Development Tutorial No. 36 - Dynamically Modify CSS Classes Using Chrome Developer Tools Elements Tag
• SAP UI5 Application Development Tutorial No. 37 - Element Review Using Chrome Developer Tools Console Panel
• SAP UI5 Application Development Tutorial No. 38 - Use Chrome Developer Tools to View Context Information when Program Execution Errors
• SAP UI5 Application Development Tutorial No. 39 - Some common errors and analysis methods of white screen in SAP UI5 application sharing
• SAP UI5 Application Development Tutorial No. 40 - How to Make SAP UI5 Release Version including component-preload.js

illustrate

Jerry has been in contact with SAP UI5 since joining the CRM Fiori development team of SAP Chengdu Research Institute in 2014. He has published many articles on the working principle and source code analysis of SAP UI5 in the SAP community and the WeChat public account "Wang Zixi".

In Jerry's article , newbies who know nothing about SAP UI5, which materials are better to start with? once mentioned that Jerry has also come all the way from SAP UI5 rookie, he knows that it is not easy for developers with only ABAP development background to transform to SAP UI5 development field, so I designed this study for SAP UI5 beginners in my spare time The tutorial divides the process of developing a complete SAP UI5 application into several steps, and strives to cover all the knowledge points involved in each step. These knowledge points may not be as in-depth as my UI5 source code analysis series articles, but strive to be easy to understand and easy for SAP UI5 beginners to understand.

The source code of each step of this tutorial is stored in my Github , identified by folders 01, 02, 03, etc. respectively.

Each step builds on the previous step with several new features added. It is recommended that beginners with zero foundation or little knowledge of SAP UI5 learn step by step from the first step in order, download these codes to the local, cooperate with the text explanation of the tutorial, and do it yourself to deepen the understanding.

If you have any questions about each step of the tutorial, you are welcome to comment and leave a message in the article corresponding to the steps of the tutorial.

In the thirty-nine steps before this tutorial, we started the local server through the command line ui5 serve , and ran the SAP UI5 application in the development mode of development mode .

For a web application running in development mode, anyone can view the complete source code of the application in the Sources panel of the Chrome Developer Tools, as shown in the following figure.

Another method is to open a commonly used website, such as Baidu, Zhihu, CSDN, etc., and find that the JavaScript source code of these websites observed in the Sources tab of the Chrome developer tool has been compressed and obfuscated, and the function name and JavaScript variable Names have become a single English letter.

The JavaScript file containing the above content, also known as the release version of the web application, is used for deployment on the web provider's production system.

So how do we generate the corresponding release version of the SAP UI5 application we have developed?

And, in SAP UI5 Application Development Tutorial No. 39 - Some common errors and analysis methods of white screen in SAP UI5 application sharing We have mentioned that when the SAP UI5 application starts, the UI5 framework will try to load the project Component-preload.js , how is this file generated?

This article will introduce the steps in detail.