How to split a large sub file into a separate chunk in webpack 2

Question

I'm trying to import a large file into a react project that is Chunked and Uglified by webpack 2.

Our code is split into chunks one of our chunks is 29MG. I want to exclude the large file from the chuck and to load that large file separately.

How do could I split the large file to it's own chunk with webpack 2?

my files

reactComponent imports a js file that has code to export the page to a PDF

reactComponent.js -> import createPDF.js

in createPDF I import a file that is very large and that file I want to split out of the check. that file isn't under node_modules.

createPDF.js -> import largeFile.js

Some of my webpack config

     entry: {
        vendor: [
          'react',
          'react-dom',
          'lodash',
          'moment',
          'underscore',
          'redux-thunk',
          'react-bootstrap-table',
          'react-bootstrap-daterangepicker',
          'react-bootstrap-multiselect',
          'react-bootstrap',
          'react-translate-component'
        ],
        app: [ './index.js' ]
      },
      plugins: [
        // compresses the JS
        new webpack.optimize.UglifyJsPlugin({
          exclude: /^2(.*?)\.js$/i, // exclude the very large file
          compress: { warnings: false },
          sourceMap: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: Infinity,
          filename: '[name].[hash].js'
        }),
      ],

is the a way that i could split out that one file? TIA!

score 0 · Accepted Answer · answered Feb 02 '19 at 22:08

I ended up doing this i'm not sure if it's the correct way to split packages but it worked for me.

I added the packages I wanted in the separate chunk to the list in vender.

   entry: {
      vendor: [
        'react',
        'react-dom',
        'lodash',
        'moment',
        'underscore',
        'redux-thunk',
        'react-bootstrap-table',
        'react-bootstrap-daterangepicker',
        'react-bootstrap-multiselect',
        'react-bootstrap',
        'react-translate-component',
        './other/fontPDF',
        './other/fontPDF.map',
        './other/exportCaseToPDF',
        'pdfmake/build/pdfmake'
      ],
      app: [ './index.js' ]
    },

all packages are going into vendor chunk except what is under the other folder

    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks(module, count) {
            var context = module.context;
            if (context && context.indexOf('public/newPortal/other') >= 0) {
                return false;
            }
            return true;
        },
        filename: '[name].[hash].js'
    }),

I made sure that only files that are under other folder are put into the the new chunk

    new webpack.optimize.CommonsChunkPlugin({
        name: 'other',
        minChunks(module, count) {
            var context = module.context;
            return context && context.indexOf('public/newPortal/other') >= 0;
        },
        filename: '[name].[hash].js'
    }),

The large file I excluded from uglify since it was crashing...

    new webpack.optimize.UglifyJsPlugin({
        exclude: /^other(.*?)\.js$/i,
        compress: { warnings: false },
        sourceMap: true
    }),

How to split a large sub file into a separate chunk in webpack 2

my files

Some of my webpack config

1 Answers1