CODEWITHSUNDEEP
javascriptwebpack
Royi Namir
Royi Namir

Reputation: 148744

Webpack - Merging splitted bundles

I have one big bundled JS file which contains scripts that can run at the end of page loading.

In other words - I wanted to reduce the size of the first downloaded JS file by multiple entry points

So I've created two entry points : 

module.exports = {
    entry: {
        a: "./scripts/entry.js",
        b: "./scripts/windowEvents.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("common.js")
    ],


    output: {
        path: path.join(__dirname, '/scripts/bundle'),
        filename: "[name].entry.js"
    },

    module: {
        loaders: [
        ]
    }
};

So now I have :

And my HTML file looks like : 

 <script src="/scripts/bundle/common.js.entry.js"></script> 
 <script src="/scripts/bundle/a.entry.js"></script> 

 //Html  renders fast

 //bottom page script
 <script src="/scripts/bundle/b.entry.js"></script>

But here is the problem :

The first two scripts sections makes 2 requests to the server. I don't want that

Question:

How can I merge the first two bundles into one bundle there will be only one request ? In other words I want to merge a.entry.js & common.js.

Something like that :

 <script src="/scripts/bundle/Common_AND_Entry_a.js"></script> 

 //Html  renders fast

 //bottom page script
 <script src="/scripts/bundle/b.entry.js"></script>

Upvotes: 0

Views: 3420

Answers (2)

Ernesto Stifano
Ernesto Stifano

Reputation: 3130

Recently, I ran into this same issue, but time has passed and CommonsChunkPlugin has been deprecated in favour of SplitChunksPlugin.

Currently there is no way to achieve the intended behaviour by using only Webpack's included functionalities, so I wrote a plugin that solves this problem and I'm glad to share it with who may need it!

You can find it HERE.

Upvotes: 0

Michael Jungo
Michael Jungo

Reputation: 33020

You can give the CommonsChunkPlugin the name of an existing chunk and it will add it to that instead of creating a new file. So in your case it would get the name a (as shown in Explicit vendor chunk):

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "a"
    })
],

If you want to change the output filename as well, you can do that with the filename option, which accepts the same placeholders as output.filename. The following produces common_and_a.js and b.entry.js:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "a",
        filename: "common_and_[name].js"

    })
],

For all available options see CommonsChunkPlugin - Options

Upvotes: 2

Related Questions