0

I have a react project build with webpack2, however the the built chunk files are all over size and the total size is over 10M! here is part of my configuration and the log output.

module.exports = {
    entry: {
        app: appConf.entry
    },
    output: {
        path: appConf.buildRoot,
        publicPath: appConf.assetsPublicPath,
        filename: assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: assetsPath('js/[id].[chunkhash].js')
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function(module, count) {
                // any required modules inside node_modules are extracted to vendor
                return (module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../../node_modules')) === 0);
            }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor']
        })
    ]
};

some of my component chunk size are almost 1M!!!

Chad Ding
  • 21
  • 4

1 Answers1

0

One reason could be that some lib is repeated all over generated chunks, to avoid that you can use: 

new webpack.optimize.CommonsChunkPlugin({
  children: true,
  minChunks: 2
})

with that you are telling webpack to create another chunk with repeated libs.

Arnold Gandarillas
  • 3,896
  • 1
  • 30
  • 36
  • nothing changes, the components import asynchronous, does this impact how webpack works? const home = (location, callback) => { require.ensure([], require => { callback(null, require('./views/Home').default); }, 'Home'); }; – Chad Ding Oct 25 '17 at 02:34
  • well maybe you can see [here](https://github.com/arkgast/react-firebase-starter/blob/master/config/webpack.base.js) I have some configurations else. And about async import didn't try that way, I'm using something like [this](https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) – Arnold Gandarillas Oct 25 '17 at 02:55
  • thanks for your help, I use a third party library antd and the root cause of my issue is that each page has a component copy import from antd so the total size is so huge, maybe i should build antd into a independent chunk. – Chad Ding Oct 26 '17 at 01:51
  • Yeah, that could be a good approach but the configuration I've posted should do that work. Maybe you can try to test each configuration indepently. – Arnold Gandarillas Oct 26 '17 at 02:24