Search code examples
reactjswebpackwebpack-bundle-analyzer

Is it normal to see lazy loaded module in webpack bundle analyzer?

Problem

My problem is that webpack analyzer keeps showing me the module that I don't want. I don't know if it's normal or not.

Code

import React, { ReactElement, Suspense } from 'react';
import ReactDOM from 'react-dom';
const SwaggerUI = React.lazy(() => import('swagger-ui-react'));

const rootElement = document.getElementById('root');

const App = (): ReactElement => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SwaggerUI url='https://petstore.swagger.io/v2/swagger.json' />
      </Suspense>
    </div>
  );
};

if (module.hot) {
  module.hot.accept();
}

ReactDOM.render(<App />, rootElement);

How I run analyzer

package.json:

"analyzer:prod": "BUNDLE_ANALYZER=true NODE_ENV=production webpack --mode production"

command:

npm run analyzer:prod

Result

enter image description here

Solution

  • Yes, I think it is normal that it is showing you lazy loaded components as well. Those components will be loaded lazily (at user's click or request), but we still care about their sizes and want to analyze those details in this view.