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

Question

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?

Answer 1

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.