How to exclude ag-grid from webpack bundle

Question

Following the webpack documentation about externals and the example here, I am trying to exclude ag-grid and ag-grid-enterprise from my webpack bundle.

Below is the externals property from my webpack.config.js (webpack v4.28.3)

Each dependency below has been included in the peerDependencies section of my package.json

externals: {
  'ag-grid': 'ag-grid', // v18.1.1
  'ag-grid-enterprise': 'ag-grid-enterprise', // v18.1.1
  'ag-grid-react': 'ag-grid-react', // v18.1.3-beta.1
  'react': 'react', // v15.6.1
  'react-dom': 'react-dom', // v15.6.1
  'react-router-dom': 'react-router-dom', // v4.2.2
  'semantic-ui-react': 'semantic-ui-react', // v0.72.0
}

Using the BundleAnalyzer (webpack-bundle-analyzer v3.0.3), the size and content of my bundle before and after is changed for each dependency listed in my externals, except for ag-grid and ag-grid-enterprise. All other dependencies have been excluded from my bundle (including ag-grid-react).

I would expect both ag-grid and ag-grid-enterprise to be excluded from the bundle as well.

I am not sure if I am missing something or if this issue is related to Project structure improvements AG-1329 Reduce grid bundle size (via tree shaking) mentioned in this post or if it is a webpack bundling issue.

Any insight would be much appreciated.

How to exclude ag-grid from webpack bundle

0 Answers