报表生成工具Stimulsoft Reports.JS如何减少产品脚本的加载时间

本是古典何须时尚 2023-09-27 21:17 9阅读 0赞

[Stimulsoft Reports][]是一款报告编写器，主要用于在桌面和Web上从头开始创建任何复杂的报告。可以在大多数平台上轻松实现部署，如ASP.NET, WinForms, .NET Core, JavaScript, WPF, Angular, Blazor, PHP, Java等，在你的应用程序中嵌入报告设计器或在线创建报告，支持从云端快速分享你的报告。

[Stimulsoft Reports.JS][]是一个使用JavaScript和HTML5的报表生成平台，它基于JavaScript和HTML5技术设计，包含创建，编辑，构建，查看和导出高复杂性报告所需的一切，无需安装浏览器扩展或框架，便可在任何JavaScript应用程序中使用。

[Stimulsoft Reports.JS官方版下载（qun：740060302）![icon-default.png?t=N3I4][icon-default.png_t_N3I4]https://www.evget.com/resource/detail-download-22949][Stimulsoft Reports.JS_qun_740060302_icon-default.png_t_N3I4_icon-default.png_t_N3I4_https_www.evget.com_resource_detail-download-22949]

我们的 JavaScript 报告和仪表板应用程序包含一个在浏览器窗口中运行的组件，主要涉及在网页上加载脚本。在本文中，我们将分享有关如何优化产品脚本加载时间的实用技巧。

下面将展示一个示例以帮助您入门：

>     <title>Loading the Report</title>
>     
>     <script src="/../scripts/stimulsoft.reports.js" type="text/javascript"></script>
>     
>     
>     <script type="text/javascript">
>     // Create a new report instance
>     var report = new Stimulsoft.Report.StiReport();
>     // Load report
>     report.loadFile("../reports/SimpleList.mrt");
>     // Render report
>     report.renderAsync(function () {
>     document.write("Complete.<br>");
>     document.write("Rendered page count: " + report.renderedPages.count);
>     });
>     </script>

在此示例中，我们加载大小为 10 MB 的stimulsoft.reports.js脚本，并输出页数。但是，如此大的脚本会显着影响网页的加载时间。为解决此问题，推荐的解决方案是将大型脚本分成较小的部分，并仅加载必要的部分。例如：

>     <title>Loading the Report</title>
>     
>     <script src="/../scripts/stimulsoft.reports.engine.js" type="text/javascript"></script>
>     <script src="/../scripts/stimulsoft.reports.chart.js" type="text/javascript"></script>
>     
>     
>     <script type="text/javascript">
>     // Create a new report instance
>     var report = new Stimulsoft.Report.StiReport();
>     // Load report
>     report.loadFile("../reports/SimpleList.mrt");
>     // Render report
>     report.renderAsync(function () {
>     document.write("Complete.<br>");
>     document.write("Rendered page count: " + report.renderedPages.count);
>     });
>     </script>

在此示例中，我们仅加载所需的最少功能，该功能包含在stimulsoft.reports.engine文件中。此外，我们加载stimulsoft.reports.chart，它负责构建图表。

**脚本有什么用？**

*  stimulsoft.reports.engine.js - 所需的最小文件，大小 - 5.5 MB；
 *  stimulsoft.reports.chart.js是一个包含在图表中显示数据的函数的脚本。如果您的报表没有提供图表的使用，则不需要加载脚本；
 *  stimulsoft.reports.export.js是一个用于将报告导出为 PDF、MS Word 或 Excel 的脚本。如果您不打算将报表导出为指定格式，则无需添加该脚本；
 *  stimulsoft.reports.import.xlsx.js是一个用于从 MS Excel 导入数据的脚本。因此，如果您使用来自其他类型来源的数据，它将对您没有用处；
 *  stimulsoft.reports.maps.js是用于在报告中构建和显示地图组件的脚本；
 *  stimulsoft.blockly.editor.js是 Blockly 编辑器的特殊脚本。如果您不使用此脚本，代码块本身将继续运行。

**使用打包脚本**

减少脚本加载时间的另一种选择是使用打包的stimulsoft.\*.pack.js文件。这些文件之间的主要区别在于它们是打包的，因此体积更小，下载时间也更短。

加载后，脚本会自行解压，但解压它们可能需要一些时间。换句话说，打包文件的体积会显着降低，从而减少脚本加载网页所需的时间，但解包会花费额外的时间。

换句话说，您可以选择加载哪些脚本。如果网络连接快速可靠，那么最好使用非打包的脚本，在计算能力大的情况下，可以优先考虑打包文件。

**异步脚本加载**

减少脚本加载时间的另一种解决方案是使用脚本标签的异步属性。在这种情况下，JS 脚本的异步加载及其执行在后台进行，这反过来又允许您一次显示整个网页，而无需等待所有文件和脚本完全加载。一个异步加载JS脚本的例子：

>     <!DOCTYPE html>
>     <html>
>     <head>
>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
>     <title>Loading Scripts in Part to Minify Project</title>
>     
>     <script async src="/../scripts/stimulsoft.reports.engine.js" type="text/javascript"></script>
>     <script async src="/../scripts/stimulsoft.reports.chart.js" type="text/javascript"></script>
>     <script async src="/../scripts/stimulsoft.reports.export.js" type="text/javascript"></script>
>     <script async src="/../scripts/stimulsoft.reports.import.xlsx.js" type="text/javascript"></script>
>     <script async src="/../scripts/stimulsoft.reports.maps.js" type="text/javascript"></script>
>     <script async src="/../scripts/stimulsoft.blockly.editor.js" type="text/javascript"></script>
>     
>     
>     <script type="text/javascript">
>     function onLoad() {
>     // Create a new report instance
>     var report = new Stimulsoft.Report.StiReport();
>     // Load report
>     report.loadFile("../reports/SimpleList.mrt");
>     // Render report
>     report.renderAsync(function () {
>     document.write("Complete.<br>");
>     document.write("Rendered page count: " + report.renderedPages.count);
>     });
>     }
>     </script>
>     </head>
>     <body οnlοad="onLoad()">
>     <div id="content"></div>
>     </body>
>     </html>

以上便是如何减少 Reports.JS 和 Dashboards.JS 产品脚本的加载时间的全部内容。

[Stimulsoft Reports]: https://www.evget.com/product/2398
[Stimulsoft Reports.JS]: https://www.evget.com/product/3619
[icon-default.png_t_N3I4]: https://csdnimg.cn/release/blog_editor_html/release2.2.5/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N3I4
[Stimulsoft Reports.JS_qun_740060302_icon-default.png_t_N3I4_icon-default.png_t_N3I4_https_www.evget.com_resource_detail-download-22949]: https://www.evget.com/resource/detail-download-22949