Javascript – Webpack and Lazy Load for large-scale Web Application

buildsjavascriptlazy-initializationperformancewebpack

Background

I am trying to develop with Webpack and JavaScript. Webpack would bundle all source code into one single file. When application becomes large, the file would be very large and cause negative impact to the performance.

Webpack

Webpack provided feature named code splitting which would split the bundle output into different according the predefined entry point. It would help increase the performance if the application become too large. However, It required to restructure the application and deeply understand the application, then the application spitted into different modules which would be the entry points for build. Also, it would requires code change when another required to call the function by Lazy Loading.

SystemJs

SystemJs is a dynamic Es Module Loader which would lazy load the required module in Runtime.

Question

Should I use webpack for large-sale application?

Possible Solution

JavaScript Source Code Bundling is necessary for large application but the application may be spitted into sub-modules and may be lazy load into application if the sub module is loaded.

Update

stage 3 proposal specific the dynamic import syntax which would used to solve my problem (lazy load for specific part).

import('./test.js').then(function(Test){
  var test = new Test.default();
  test.doSomething()
})

Which is similar to

import Test from './test';
var test = new Test();
test.doSomething();

Webpack support

It required to config the public path, chunkFilename and add syntax-dynamic-import for enable new syntax (import()).

const path = require('path');

module.exports = {
    entry: {
        app:    './src/app.js'
    },
    output: {
        publicPath: 'bin/',
        path: path.resolve(__dirname, 'bin'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015'],
                            plugins: ["syntax-dynamic-import"]
                        }
                    }
                ]               
            }
        ]
    }
};

Best Answer

All mature JavaScript loading and bundling tools, from Webpack to RequireJS to SystemJS, provide techniques for doing this.

In Webpack it's enabled by a feature known as code splitting.

In SystemJS it's enabled by features such as bundle arithmetic, dep caching, and bundle injection and is provided by JSPM or direct usage of the SystemJS Builder.

I forget the terminology for RequireJS but the functionality exists there as well and is provided by r.js.

So just research.

But, to answer your direct question, all of these tools, including Webpack, are suitable for developing large applications. In fact they excel at it. My personal preference is not for Webpack but rather for JSPM.

As Ben Cheng notes, Webpack's code splitting approach requires you to structure your application in terms of different entry points, which you can morally think of as sub packages or sub apps. That said, this structuring technique plays a role in splitting up bundles in all of these tools.

Breaking down your application into these more independent units can be a difficult task.

Disclaimer: I am a member of the JSPM team

Related Topic