javascriptperformancerequirejsgruntjsgrunt-contrib-requirejs

Loading issue on slow connection with single large minified file using grunt requirejs


I have a large amount of js files in my website which on minification and uglification using grunt-requirejs plugin gives a single file of size 1.6 MB. Loading this file on slow internet connection gives requiejs timeout error.

Uncaught Error: Load timeout for modules: 2dc6219f.main http://requirejs.org/docs/errors.html#timeout

I have checked the source file using chrome dev tool and found that the source file is of the same size as that of my original file but still when i continue using the portal two of my modules do not work.

I tried removing those two modules and checked it again, but i was still getting the loading error however none of my other modules were affected because of this and all worked fine.

How can i remove this loading issue? Is it possible to minify and uglify code into different modules so that one large file can be broken down?


Solution

  • There is one property available in reuirejs configs:

    waitSeconds: Defines the loading time for modules. Depending on the complexity of the dependencies and the size of the involved libraries, increasing the wait interval may be required. Default is 7 seconds. Setting the value to 0 disables the waiting interval.

    If you are using grunt then you can mention waitSeconds in reuirejs task

    requirejs: {
            dist: {
                options: {
                    baseUrl: '<%= yeoman.app %>/scripts',
                    paths: {...},
                    waitSeconds: 20000
            }
    }
    

    Otherwise at last you can overwrite in your require.js file itself.