search

IgniteUI / igniteui-angular-wrappers

Ignite UI Angular component extensions by Infragistics
http://igniteui.github.io/igniteui-angular-wrappers
MIT License
148 stars 30 forks source link

Script bundle takes time and failed to load in IIS deployment #304

Closed sanmscse closed 5 years ago

sanmscse commented 5 years ago

Hi, my Script bundle is 5.83 MB. It loads fine in local. But in IIS bundle files failed to failed.

image

image

can anyone suggest how to load script bundle when its size is high image

mpavlinov commented 5 years ago

@sanmscse Can you share the configuration where you load the Ignite UI scripts.

sanmscse commented 5 years ago

Hi @mpavlinov

FYI, i'm using Angular5

Ignite UI scripts are configured in angular-cli.json file

 "scripts": [
        "assets/js/misc_modules/Ignite-UI/js/modernizr-2.8.3.js",
        "assets/js/misc_modules/Ignite-UI/js/infragistics.core.js",
        "assets/js/misc_modules/Ignite-UI/js/infragistics.lob.js",

        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_core.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_collections.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_text.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_io.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_ui.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.documents.core_core.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_collectionsextended.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.excel_core.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_threading.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_web.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.xml.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.documents.core_openxml.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.excel_serialization_openxml.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.gridexcelexporter.js",

        "assets/js/blob.js",
        "assets/js/filesaver.js"
      ],

i dont have dashboard and iggrid is the first page in my project

dkamburov commented 5 years ago

@sanmscse I don't see references to jquery and jquery-ui here. Have you tried adding them here to the scripts section?

sanmscse commented 5 years ago

Hi @dkamburov ,

i've already added i've just skipped those in this screenshot, here is the exact references


"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/ionicons/dist/css/ionicons.min.css",
        "_variables.less",
        "../node_modules/admin-lte/plugins/daterangepicker/daterangepicker.css",
        "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
        "../node_modules/@ng-select/ng-select/themes/default.theme.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jqueryui/jquery-ui.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/moment/min/moment.min.js",
        "assets/js/moment-timezone-with-data-2012-2022.min.js",
        "../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js",
        "../node_modules/admin-lte/dist/js/app.min.js",
        "assets/js/adminLTEOptions.js",
        "assets/js/scripts.js",

        "assets/js/misc_modules/Ignite-UI/js/modernizr-2.8.3.js",
        "assets/js/misc_modules/Ignite-UI/js/infragistics.core.js",
        "assets/js/misc_modules/Ignite-UI/js/infragistics.lob.js",

        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_core.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_collections.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_text.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_io.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_ui.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.documents.core_core.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_collectionsextended.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.excel_core.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_threading.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.ext_web.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.xml.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.documents.core_openxml.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.excel_serialization_openxml.js",
        "assets/js/misc_modules/Ignite-UI/js/modules/infragistics.gridexcelexporter.js",

        "assets/js/blob.js",
        "assets/js/filesaver.js"
      ],
dkamburov commented 5 years ago

Hi @sanmscse, I generated a project with ng cli and I build it. Then I deployed the output of the dist folder to IIS and it all seems to work fine. Not sure why you are receiving the error. Could it be some option in the configuration or some limitation of the IIS? Here's also the project I tested, so you can review it on your side. Hope it helps. ng-cli-with-angular-wrappers.zip

sanmscse commented 5 years ago

Hi @dkamburov,

the given example does not included ignite files. so i've used it from my example with version of 18.1.152.

FYI, to be more clear with this issue I'm using this in india server which is worked fine after deployed in IIS. But when i deploy this in US server machine, the latency issue is causing to failed to load scripts file which the file size is high

For ex: infragistics.lob.js file is 2.56MB as its minimized version infragistics.excel_core.js is 1.80 MB and total bundle size of all listed above is 5.83MB

I've already set maximum bandwidth image

even after that files not loading with file load failed as image

mpavlinov commented 5 years ago

@sanmscse You can use the Ignite UI Custom Download to bundle only the controls that you use in your project. This should lower down your bundle size. Also you can apply gzip content compression when serving it through IIS.

mpavlinov commented 5 years ago

@sanmscse Did you try the suggested approaches?