Dynamic Import Being Added To Webpack Bundle

I want to import a module under a certain condition, so I'm doing it through dynamic import syntax: if (showModal) { import('fancy-modal').then(({ initModal }) => {

Solution 1:

Webpack will always build all of your code, unless the variable is guaranteed to always be false, e.g. when using a define plugin and using if(process.env.NODE_ENV !== 'production'){ // do some dev only stuff}.

By default webpack 4 will split out dynamic imports into chunks using the split chunks plugin https://webpack.js.org/plugins/split-chunks-plugin/

If you have imported fancy-modal anywhere else in your code in a "non dynamic" way, webpack will realise this and just build it once all in the same bundle, so you won't get any benefit from the dynamic import.