typescriptwebpackwebpack-splitchunks

Query in webpack


I am trying to make a library (using typescript and webpack). The library is intended to be used by different angular applications.

Every application may not consume same set of functionalities and thus the library is split into multiple ones (for every functionality) using webpack's entry. Now, the library is split as (say) main.js, func1.js, func2.js, etc. Here, main.js is the minimum library an application has to consume along with one or more required functionality libraries (combination of consumption is based on application). I achieved the expected splitting, but the common modules are duplicated in every chunk and resulted in increase in application size.

To avoid duplication, I used webpack's optimization.splitChunks, as follows.

optimization {
    splitChunks: {
        common: {
            name: 'common',
            chunks: 'initial',
            minChunks: 2
        }
    }
}

The option avoided duplication and created a new file, named common.js, with all common modules.

Now, I need the common.js to be merged with main.js (our first chunk, a must-to-be-consumed one), instead of it being a separate file. Is this achievable? If so, how?


Solution

  • I execute webpack again to merge common.js and main.js, to result in main.js using config as follows,

    entry: {
        'main': ['common.js', 'main.js']
      }
    

    By this way I achieve my requirement. If any other opinion exist, please post.