CINXE.COM
<!DOCTYPE html><html lang="en"><head><title data-rh="true">Code Splitting | webpack</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="theme-color" content="#2B3A42"/><meta data-rh="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-rh="true" name="description" content="webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."/><meta data-rh="true" property="og:site_name" content="webpack"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" property="og:title" content="Code Splitting | webpack"/><meta data-rh="true" property="og:description" name="description" content="webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."/><meta data-rh="true" property="og:image" content="https://webpack.js.org/icon-pwa-512x512.934507c816afbcdb.png"/><meta data-rh="true" property="twitter:card" content="summary"/><meta data-rh="true" property="twitter:site" content="@webpack"/><meta data-rh="true" property="twitter:creator" content="@webpack"/><meta data-rh="true" property="twitter:domain" content="https://webpack.js.org/"/><meta data-rh="true" name="mobile-web-app-capable" content="yes"/><meta data-rh="true" name="apple-mobile-web-app-capable" content="yes"/><meta data-rh="true" name="apple-mobile-web-app-status-bar-style" content="black"/><meta data-rh="true" name="apple-mobile-web-app-title" content="webpack"/><meta data-rh="true" name="msapplication-TileImage" content="/icon_150x150.png"/><meta data-rh="true" name="msapplication-TileColor" content="#465e69"/><link data-rh="true" rel="icon" type="image/x-icon" href="/favicon.a3dd58d3142f7566.ico"/><link data-rh="true" rel="manifest" href="/manifest.json"/><link data-rh="true" rel="canonical" href="https://webpack.js.org/guides/code-splitting/"/><link data-rh="true" rel="icon" sizes="192x192" href="/icon_192x192.png"/><link data-rh="true" rel="icon" sizes="512x512" href="/icon_512x512.png"/><link data-rh="true" rel="apple-touch-icon" href="/icon_180x180.png"/><link data-rh="true" rel="mask-icon" href="/logo-on-white-bg.4a16a9aed80e42ee.svg" color="#465e69"/><link rel="stylesheet" href=/index.93d749b6c038c22c.css /><link rel="stylesheet" href=/4513.869f0846a132527b.css /></head><body><div id="root"><div class="site"><div class="site__header"><header class="bg-blue-800 dark:bg-gray-900"><div class="flex items-center py-10 px-[16px] justify-between md:px-[24px] md:max-w-[1024px] md:mx-auto md:justify-start"><button class="bg-transparent border-none md:hidden"><svg viewBox="-62 138 25 25" width="20" height="20" class="fill-current text-white"><path fill="currentColor" d="M-60.2 140.2h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8M-60.2 148.7h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8M-60.2 157.2h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8"></path></svg></button><a class="md:mr-auto" href="/"><img class="logo" src="/site-logo.c0e60df418e04f58.svg" alt="webpack logo" width="122" height="35"/></a><nav class="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px]"><a aria-label="webpack documentation" class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/concepts/">Documentation</a><a aria-label="contribute to webpack" class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/contribute/">Contribute</a><a aria-label="webpack blog" class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/blog/">Blog</a><div class="relative "><a href="https://github.com/webpack/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" aria-label="webpack on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="16"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 6.8 9.5c.5 0 .7-.2.7-.5v-1.7C6.7 20 6.1 18 6.1 18c-.4-1.2-1-1.5-1-1.5-1-.6 0-.6 0-.6 1 0 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9 0-.7.3-1.1.6-1.4-2.2-.2-4.6-1-4.6-4.9 0-1.1.4-2 1-2.7 0-.3-.4-1.3.2-2.7 0 0 .8-.2 2.7 1a9.4 9.4 0 0 1 5 0c2-1.2 2.8-1 2.8-1 .5 1.4.1 2.4 0 2.7.7.7 1 1.6 1 2.7 0 3.8-2.3 4.7-4.5 5 .4.2.7.8.7 1.8V21c0 .3.2.6.7.5 4-1.3 6.8-5 6.8-9.5A10 10 0 0 0 12 2"></path></svg></a></div><div class="relative "><a href="https://x.com/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" aria-label="webpack on X"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="16"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a></div><div class="relative "><a href="https://stackoverflow.com/questions/tagged/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" aria-label="webpack on StackOverflow"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="16"><path d="M17.4 20.2v-5.4h1.8V22H3v-7.2h1.8v5.4zM6.8 14.3l.3-1.7 8.8 1.8-.3 1.8zm1.1-4.2.8-1.6 8.1 3.8-.7 1.6zm2.3-4 1.1-1.4 7 5.8-1.2 1.4L10 6m4.7-4L20 9l-1.4 1-5.4-7 1.4-1m-8 16.5v-1.8h9v1.8z"></path></svg></a></div><nav class="dropdown "><button aria-haspopup="true" aria-expanded="false" aria-label="Select language"><svg viewBox="0 0 610 560" xmlns="http://www.w3.org/2000/svg" class="dropdown__language text-gray-100 hover:text-blue-200 transition-colors duration-200"><path d="m304.8 99.2-162.5-57.3v353.6l162.5-52.6z"></path><path d="m300.9 99 168.7-57.3v353.6l-168.7-52.5zm-200.7 358.4 200.7-66.9v-291.5l-200.7 66.9z" fill="currentColor"></path><path d="m392.4 461.8 28.4 46.8 15-43.5zm-223.9-262.3c-1.1-1 1.4 8.6 4.8 12 6.1 6.1 10.8 6.9 13.3 7 5.6.2 12.5-1.4 16.5-3.1s10.9-5.2 13.5-10.4c.6-1.1 2.1-3 1.1-7.5-.7-3.5-3-4.8-5.7-4.6s-11 2.4-15 3.6-12.2 3.7-15.8 4.5-11.5-.3-12.7-1.5zm101.2 114.8c-1.6-.6-34.3-14.1-38.9-16.4a368 368 0 0 0 -17.5-7.5c12.3-19 20.1-33.4 21.2-35.6 1.9-4 15-29.5 15.3-31.1s.7-7.5.4-8.9-5.1 1.3-11.6 3.5-18.9 10.2-23.7 11.2-20.1 6.8-28 9.4c-7.8 2.6-22.7 7.1-28.8 8.8-6.1 1.6-11.4 1.8-14.9 2.8 0 0 .5 4.8 1.4 6.2s4.1 5 7.9 5.9c3.8 1 10 .6 12.8-.1s7.7-3.1 8.4-4.1c.7-1.1-.3-4.3.8-5.3s16.1-4.5 21.7-6.2 27.2-9.2 30.1-8.8a916 916 0 0 1 -23.9 47.7 821 821 0 0 1 -45 63.3c-5.3 6-18 21.5-22.4 25 1.1.3 9-.4 10.4-1.3 8.9-5.5 23.8-24.1 28.6-29.7a489.1 489.1 0 0 0 36.7-49.4c1.9.8 17.6 13.6 21.7 16.4a293 293 0 0 0 23.7 13.3c3.5 1.5 16.9 7.7 17.5 5.6.7-1.8-2.3-14.1-3.9-14.7z"></path><path clip-rule="evenodd" d="m194.1 484.7a204.9 204.9 0 0 0 30.7 14.5 233.6 233.6 0 0 0 46.4 12c.5 0 16 1.9 19.2 1.9h15.7c6.1-.5 11.8-.9 17.9-1.7 4.9-.7 10.3-1.6 15.5-2.8 3.8-.9 7.8-1.7 11.7-3 3.7-1 7.8-2.4 11.8-3.8l8.2-3.1c2.3-1 5.1-2.3 7.7-3.3a243 243 0 0 0 19.2-10c2.3-1.2 7.5-5.2 10.3-5.2 3.1 0 5.2 2.8 5.2 5.2 0 5.1-6.8 6.6-9.9 8.9-3.3 2.3-7.3 4-10.8 5.9-7 3.7-14.1 6.8-20.9 9.4a251 251 0 0 1 -27.3 8.5c-3.3.7-6.6 1.6-9.9 2.1-1.7.3-19.9 3.1-24.9 3.1h-23a293.9 293.9 0 0 1 -35.1-5.2 196 196 0 0 1 -33.1-10.3c-12-4.5-24.6-10.5-36.4-18.3-2.1-1.4-2.3-2.8-2.3-4.4a5 5 0 0 1 5.1-5.1c2.4.1 8 4.2 9 4.7zm101.4-98.1-189.9 63.2v-280.1l189.9-63.2zm10.6-288.3v292.7a6 6 0 0 1 -1.2 2.6c-.3.5-1 1.2-1.6 1.4a14621 14621 0 0 1 -203.1 67.6c-2.1 0-4-1.4-5.1-3.7 0-.2-.2-.3-.2-.7v-292.8c.3-.9.5-2.1 1.2-2.8 1.4-1.9 3.8-2.3 5.4-2.8 3-1 196.1-65.8 198.9-65.8 1.9 0 5.7 1.2 5.7 4.3z" fill-rule="evenodd"></path><path clip-rule="evenodd" d="m464.3 388-158-49.1v-236l158-53.7zm10.6-345.8v352.4c-.2 4-3 5.7-5.6 5.7-2.3 0-18.6-5.6-21.4-6.4l-65.8-20.4-14.6-4.7-12.9-4c-18.6-5.7-37.6-11.5-56.3-17.8-.7-.2-2.4-2.6-2.4-3.1v-246.1c.3-.9.7-1.9 1.6-2.6 1.4-1.6 61.1-21.4 84.7-29.3 6.3-2.3 84.8-29.3 87.3-29.3 3 .1 5.4 2.3 5.4 5.6z" fill-rule="evenodd"></path><path d="m515 461.8-211.1-67.3.9-292.8 210.2 66.9z"></path><path clip-rule="evenodd" d="m408.6 232.5-20.7 50.1 38.1 11.5zm-12.4-47.2 27.2 8.2 49.5 178.6-27.9-8.5-10-36.7-57.7-17.5-12.4 29.9-27.9-8.5z" fill="currentColor" fill-rule="evenodd"></path></svg><i aria-hidden="true" class="dropdown__arrow"></i></button><div class="dropdown__list "><ul><li><a href="https://webpack.js.org/guides/code-splitting/" class="px-5 block"><span>English</span></a></li><li><a href="https://webpack.docschina.org/guides/code-splitting/" class="px-5 block"><span lang="zh">中文</span></a></li><li><a href="https://webpack.kr/guides/code-splitting/" class="px-5 block"><span lang="ko">한국어</span></a></li></ul></div></nav></nav><div class="inline-flex items-center ml-[18px]"><div class="relative "><button aria-label="Switch to dark theme" class="bg-transparent border-none cursor-pointer text-[16px] p-0 inline-flex items-center text-gray-100 hover:text-blue-200 transition-colors duration-200" data-testid="hello-darkness"><svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 18.14a.722.722 0 0 0-.722.722v2.166a.722.722 0 0 0 1.444 0v-2.166a.722.722 0 0 0-.722-.721ZM12 2.25a.722.722 0 0 0-.722.722v2.166a.722.722 0 0 0 1.444 0V2.972A.722.722 0 0 0 12 2.25ZM5.86 12a.722.722 0 0 0-.723-.722H2.972a.722.722 0 0 0 0 1.444h2.165A.722.722 0 0 0 5.86 12ZM21.028 11.278h-2.165a.722.722 0 0 0 0 1.444h2.165a.722.722 0 0 0 0-1.444ZM7.148 16.13a.72.72 0 0 0-.51.21l-1.533 1.534a.72.72 0 1 0 1.022 1.022l1.532-1.533a.724.724 0 0 0-.51-1.233ZM16.852 7.87a.72.72 0 0 0 .51-.21l1.533-1.533a.72.72 0 0 0 .211-.511.72.72 0 0 0-.722-.722.72.72 0 0 0-.51.21L16.34 6.639a.72.72 0 0 0-.211.51.72.72 0 0 0 .722.722ZM6.127 5.105a.72.72 0 0 0-.511-.211.72.72 0 0 0-.722.722.72.72 0 0 0 .21.51L6.638 7.66a.72.72 0 0 0 .511.211.72.72 0 0 0 .722-.722.72.72 0 0 0-.21-.51L6.126 5.105ZM17.363 16.34a.72.72 0 1 0-1.022 1.022l1.532 1.533a.72.72 0 0 0 1.022 0 .72.72 0 0 0 0-1.021l-1.532-1.533ZM12 7.5c-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5-2.02-4.5-4.5-4.5Z" fill="currentColor"></path></svg></button></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div><div class="bg-gray-100 dark:bg-gray-800 hidden md:block"><div class="md:max-w-[1024px] md:mx-auto md:grid md:grid-flow-col md:justify-end md:gap-x-[20px] md:px-[24px]" data-testid="sub-navigation"><a title="api" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/api/">API</a><a title="concepts" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/concepts/">concepts</a><a title="configuration" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/configuration/">configuration</a><a title="guides" aria-current="page" class="!text-black dark:!text-white text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/guides/">guides</a><a title="loaders" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/loaders/">loaders</a><a title="migrate" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/migrate/">migrate</a><a title="plugins" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/plugins/">plugins</a></div></div></header></div><div class="container site__content"><div class="sponsors"><div class="sponsors__content"><div class="sponsors__link-wrapper"><a href="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship" target="_blank" rel="noopener noreferrer"><img class="agGridLogo" src="/ag-grid-logo.6a68915181a34a15.png" alt="ag grid" width="220" loading="lazy"/></a></div><div class="sponsors__link-wrapper"><a href="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship" target="_blank" rel="noopener noreferrer"><img class="agChartsLogo" src="/ag-charts-logo.f1735fb8902861d2.png" alt="ag charts" width="220" loading="lazy"/></a></div><div class="sponsors__link-wrapper-2"><a href="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship" target="_blank" rel="noopener noreferrer"><div class="sponsors__tagline">Datagrid and Charting for Enterprise Applications</div><div class="sponsors__img__wrapper"><img src="/icon-square-small.9e8aff7a67a5dd20.svg" alt="webpack" width="150" height="150" loading="lazy"/></div><div class="sponsors__footer">Proud to partner with webpack</div></a></div></div></div><nav class="sidebar site__sidebar"><div class="sidebar__inner"><div class="relative z-0 bg-white dark:bg-gray-100 "><select class="text-gray-600 text-14 px-5 py-5 appearance-none box-border border border-gray-200 border-solid flex-col flex w-full rounded-none bg-transparent bg-none"><option selected="" value="5">webpack 5</option><option value="4">webpack 4</option></select><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="absolute right-5 top-5 fill-current text-gray-300 z-[-1]" width="20" height="20"><path d="M4.5 7.5c.5-.4 1-.4 1.6 0l3.9 3.8 4-3.8c.4-.4 1-.4 1.5 0 .4.5.4 1.2 0 1.7l-4.7 4.5a1 1 0 0 1-1.6 0L4.5 9.2c-.4-.5-.4-1.2 0-1.7"></path></svg></div><div class="sidebar-item sidebar-item--disabled`"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="sidebar-item__toggle" width="15" height="17" fill="#175d96"><path d="M10 3.3c-.6 0-1 .4-1.1 1.1v11.2c0 .3.2.6.4.8s.5.4.8.4c.6 0 1-.4 1.1-1.1V4.5c0-.3-.2-.6-.4-.8s-.5-.4-.8-.4"></path></svg><a class="sidebar-item__title sidebar-link__print" href="/guides/printable/" rel="nofollow noopener noreferrer" alt="Print" title="Print" target="_blank">Print Section<img src="/icon-print.3c147a8b5a684f88.svg" width="27" height="20" alt="Printer Icon"/></a></div><div><div class="sidebar-item sidebar-item--disabled"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="sidebar-item__toggle" width="15" height="17" fill="#175d96"><path d="M10 3.3c-.6 0-1 .4-1.1 1.1v11.2c0 .3.2.6.4.8s.5.4.8.4c.6 0 1-.4 1.1-1.1V4.5c0-.3-.2-.6-.4-.8s-.5-.4-.8-.4"></path></svg><a class="sidebar-item__title" href="/guides/">Guides</a></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/getting-started/">Getting Started</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Basic Setup"><a class="" href="/guides/getting-started/#basic-setup">Basic Setup</a></li><li class="sidebar-item__anchor" title="Creating a Bundle"><a class="" href="/guides/getting-started/#creating-a-bundle">Creating a Bundle</a></li><li class="sidebar-item__anchor" title="Modules"><a class="" href="/guides/getting-started/#modules">Modules</a></li><li class="sidebar-item__anchor" title="Using a Configuration"><a class="" href="/guides/getting-started/#using-a-configuration">Using a Configuration</a></li><li class="sidebar-item__anchor" title="NPM Scripts"><a class="" href="/guides/getting-started/#npm-scripts">NPM Scripts</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/getting-started/#conclusion">Conclusion</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/asset-management/">Asset Management</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Setup"><a class="" href="/guides/asset-management/#setup">Setup</a></li><li class="sidebar-item__anchor" title="Loading CSS"><a class="" href="/guides/asset-management/#loading-css">Loading CSS</a></li><li class="sidebar-item__anchor" title="Loading Images"><a class="" href="/guides/asset-management/#loading-images">Loading Images</a></li><li class="sidebar-item__anchor" title="Loading Fonts"><a class="" href="/guides/asset-management/#loading-fonts">Loading Fonts</a></li><li class="sidebar-item__anchor" title="Loading Data"><a class="" href="/guides/asset-management/#loading-data">Loading Data</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Customize parser of JSON modules"><a class="" href="/guides/asset-management/#customize-parser-of-json-modules">Customize parser of JSON modules</a></li></ul></li><li class="sidebar-item__anchor" title="Global Assets"><a class="" href="/guides/asset-management/#global-assets">Global Assets</a></li><li class="sidebar-item__anchor" title="Wrapping up"><a class="" href="/guides/asset-management/#wrapping-up">Wrapping up</a></li><li class="sidebar-item__anchor" title="Next guide"><a class="" href="/guides/asset-management/#next-guide">Next guide</a></li><li class="sidebar-item__anchor" title="Further Reading"><a class="" href="/guides/asset-management/#further-reading">Further Reading</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/output-management/">Output Management</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Preparation"><a class="" href="/guides/output-management/#preparation">Preparation</a></li><li class="sidebar-item__anchor" title="Setting up HtmlWebpackPlugin"><a class="" href="/guides/output-management/#setting-up-htmlwebpackplugin">Setting up HtmlWebpackPlugin</a></li><li class="sidebar-item__anchor" title="Cleaning up the /dist folder"><a class="" href="/guides/output-management/#cleaning-up-the-dist-folder">Cleaning up the /dist folder</a></li><li class="sidebar-item__anchor" title="The Manifest"><a class="" href="/guides/output-management/#the-manifest">The Manifest</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/output-management/#conclusion">Conclusion</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/development/">Development</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Using source maps"><a class="" href="/guides/development/#using-source-maps">Using source maps</a></li><li class="sidebar-item__anchor" title="Choosing a Development Tool"><a class="" href="/guides/development/#choosing-a-development-tool">Choosing a Development Tool</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Using Watch Mode"><a class="" href="/guides/development/#using-watch-mode">Using Watch Mode</a></li><li class="sidebar-item__anchor" title="Using webpack-dev-server"><a class="" href="/guides/development/#using-webpack-dev-server">Using webpack-dev-server</a></li><li class="sidebar-item__anchor" title="Using webpack-dev-middleware"><a class="" href="/guides/development/#using-webpack-dev-middleware">Using webpack-dev-middleware</a></li></ul></li><li class="sidebar-item__anchor" title="Adjusting Your Text Editor"><a class="" href="/guides/development/#adjusting-your-text-editor">Adjusting Your Text Editor</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/development/#conclusion">Conclusion</a></li></ul></div></div><div><div class="sidebar-item sidebar-item--open "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a aria-current="page" class="sidebar-item__title active" href="/guides/code-splitting/">Code Splitting</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Entry Points"><a aria-current="page" class="active" href="/guides/code-splitting/#entry-points">Entry Points</a></li><li class="sidebar-item__anchor" title="Prevent Duplication"><a aria-current="page" class="active" href="/guides/code-splitting/#prevent-duplication">Prevent Duplication</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Entry dependencies"><a aria-current="page" class="active" href="/guides/code-splitting/#entry-dependencies">Entry dependencies</a></li><li class="sidebar-item__anchor" title="SplitChunksPlugin"><a aria-current="page" class="active" href="/guides/code-splitting/#splitchunksplugin">SplitChunksPlugin</a></li></ul></li><li class="sidebar-item__anchor" title="Dynamic Imports"><a aria-current="page" class="active" href="/guides/code-splitting/#dynamic-imports">Dynamic Imports</a></li><li class="sidebar-item__anchor" title="Prefetching/Preloading modules"><a aria-current="page" class="active" href="/guides/code-splitting/#prefetchingpreloading-modules">Prefetching/Preloading modules</a></li><li class="sidebar-item__anchor" title="Bundle Analysis"><a aria-current="page" class="active" href="/guides/code-splitting/#bundle-analysis">Bundle Analysis</a></li><li class="sidebar-item__anchor" title="Next Steps"><a aria-current="page" class="active" href="/guides/code-splitting/#next-steps">Next Steps</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/caching/">Caching</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Output Filenames"><a class="" href="/guides/caching/#output-filenames">Output Filenames</a></li><li class="sidebar-item__anchor" title="Extracting Boilerplate"><a class="" href="/guides/caching/#extracting-boilerplate">Extracting Boilerplate</a></li><li class="sidebar-item__anchor" title="Module Identifiers"><a class="" href="/guides/caching/#module-identifiers">Module Identifiers</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/caching/#conclusion">Conclusion</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/author-libraries/">Authoring Libraries</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Authoring a Library"><a class="" href="/guides/author-libraries/#authoring-a-library">Authoring a Library</a></li><li class="sidebar-item__anchor" title="Webpack Configuration"><a class="" href="/guides/author-libraries/#webpack-configuration">Webpack Configuration</a></li><li class="sidebar-item__anchor" title="Expose the Library"><a class="" href="/guides/author-libraries/#expose-the-library">Expose the Library</a></li><li class="sidebar-item__anchor" title="Externalize Lodash"><a class="" href="/guides/author-libraries/#externalize-lodash">Externalize Lodash</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="External Limitations"><a class="" href="/guides/author-libraries/#external-limitations">External Limitations</a></li></ul></li><li class="sidebar-item__anchor" title="Final Steps"><a class="" href="/guides/author-libraries/#final-steps">Final Steps</a></li></ul></div></div><div><div class="sidebar-item sidebar-item--disabled"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="sidebar-item__toggle" width="15" height="17" fill="#175d96"><path d="M10 3.3c-.6 0-1 .4-1.1 1.1v11.2c0 .3.2.6.4.8s.5.4.8.4c.6 0 1-.4 1.1-1.1V4.5c0-.3-.2-.6-.4-.8s-.5-.4-.8-.4"></path></svg><a class="sidebar-item__title" href="/guides/environment-variables/">Environment Variables</a></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/build-performance/">Build Performance</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="General"><a class="" href="/guides/build-performance/#general">General</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Stay Up to Date"><a class="" href="/guides/build-performance/#stay-up-to-date">Stay Up to Date</a></li><li class="sidebar-item__anchor" title="Loaders"><a class="" href="/guides/build-performance/#loaders">Loaders</a></li><li class="sidebar-item__anchor" title="Bootstrap"><a class="" href="/guides/build-performance/#bootstrap">Bootstrap</a></li><li class="sidebar-item__anchor" title="Resolving"><a class="" href="/guides/build-performance/#resolving">Resolving</a></li><li class="sidebar-item__anchor" title="Dlls"><a class="" href="/guides/build-performance/#dlls">Dlls</a></li><li class="sidebar-item__anchor" title="Smaller = Faster"><a class="" href="/guides/build-performance/#smaller--faster">Smaller = Faster</a></li><li class="sidebar-item__anchor" title="Worker Pool"><a class="" href="/guides/build-performance/#worker-pool">Worker Pool</a></li><li class="sidebar-item__anchor" title="Persistent cache"><a class="" href="/guides/build-performance/#persistent-cache">Persistent cache</a></li><li class="sidebar-item__anchor" title="Custom plugins/loaders"><a class="" href="/guides/build-performance/#custom-pluginsloaders">Custom plugins/loaders</a></li><li class="sidebar-item__anchor" title="Progress plugin"><a class="" href="/guides/build-performance/#progress-plugin">Progress plugin</a></li></ul></li><li class="sidebar-item__anchor" title="Development"><a class="" href="/guides/build-performance/#development">Development</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Incremental Builds"><a class="" href="/guides/build-performance/#incremental-builds">Incremental Builds</a></li><li class="sidebar-item__anchor" title="Compile in Memory"><a class="" href="/guides/build-performance/#compile-in-memory">Compile in Memory</a></li><li class="sidebar-item__anchor" title="stats.toJson speed"><a class="" href="/guides/build-performance/#statstojson-speed">stats.toJson speed</a></li><li class="sidebar-item__anchor" title="Devtool"><a class="" href="/guides/build-performance/#devtool">Devtool</a></li><li class="sidebar-item__anchor" title="Avoid Production Specific Tooling"><a class="" href="/guides/build-performance/#avoid-production-specific-tooling">Avoid Production Specific Tooling</a></li><li class="sidebar-item__anchor" title="Minimal Entry Chunk"><a class="" href="/guides/build-performance/#minimal-entry-chunk">Minimal Entry Chunk</a></li><li class="sidebar-item__anchor" title="Avoid Extra Optimization Steps"><a class="" href="/guides/build-performance/#avoid-extra-optimization-steps">Avoid Extra Optimization Steps</a></li><li class="sidebar-item__anchor" title="Output Without Path Info"><a class="" href="/guides/build-performance/#output-without-path-info">Output Without Path Info</a></li><li class="sidebar-item__anchor" title="Node.js Versions 8.9.10-9.11.1"><a class="" href="/guides/build-performance/#nodejs-versions-8910-9111">Node.js Versions 8.9.10-9.11.1</a></li><li class="sidebar-item__anchor" title="TypeScript Loader"><a class="" href="/guides/build-performance/#typescript-loader">TypeScript Loader</a></li></ul></li><li class="sidebar-item__anchor" title="Production"><a class="" href="/guides/build-performance/#production">Production</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Source Maps"><a class="" href="/guides/build-performance/#source-maps">Source Maps</a></li></ul></li><li class="sidebar-item__anchor" title="Specific Tooling Issues"><a class="" href="/guides/build-performance/#specific-tooling-issues">Specific Tooling Issues</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Babel"><a class="" href="/guides/build-performance/#babel">Babel</a></li><li class="sidebar-item__anchor" title="TypeScript"><a class="" href="/guides/build-performance/#typescript">TypeScript</a></li><li class="sidebar-item__anchor" title="Sass"><a class="" href="/guides/build-performance/#sass">Sass</a></li></ul></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/csp/">Content Security Policies</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Examples"><a class="" href="/guides/csp/#examples">Examples</a></li><li class="sidebar-item__anchor" title="Enabling CSP"><a class="" href="/guides/csp/#enabling-csp">Enabling CSP</a></li><li class="sidebar-item__anchor" title="Trusted Types"><a class="" href="/guides/csp/#trusted-types">Trusted Types</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/development-vagrant/">Development - Vagrant</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Configuring the Project"><a class="" href="/guides/development-vagrant/#configuring-the-project">Configuring the Project</a></li><li class="sidebar-item__anchor" title="Running the Server"><a class="" href="/guides/development-vagrant/#running-the-server">Running the Server</a></li><li class="sidebar-item__anchor" title="Advanced Usage with nginx"><a class="" href="/guides/development-vagrant/#advanced-usage-with-nginx">Advanced Usage with nginx</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/development-vagrant/#conclusion">Conclusion</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/dependency-management/">Dependency Management</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="require with expression"><a class="" href="/guides/dependency-management/#require-with-expression">require with expression</a></li><li class="sidebar-item__anchor" title="require.context"><a class="" href="/guides/dependency-management/#requirecontext">require.context</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="context module API"><a class="" href="/guides/dependency-management/#context-module-api">context module API</a></li></ul></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/installation/">Installation</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Prerequisites"><a class="" href="/guides/installation/#prerequisites">Prerequisites</a></li><li class="sidebar-item__anchor" title="Local Installation"><a class="" href="/guides/installation/#local-installation">Local Installation</a></li><li class="sidebar-item__anchor" title="Global Installation"><a class="" href="/guides/installation/#global-installation">Global Installation</a></li><li class="sidebar-item__anchor" title="Bleeding Edge"><a class="" href="/guides/installation/#bleeding-edge">Bleeding Edge</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/hot-module-replacement/">Hot Module Replacement</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Enabling HMR"><a class="" href="/guides/hot-module-replacement/#enabling-hmr">Enabling HMR</a></li><li class="sidebar-item__anchor" title="Via the Node.js API"><a class="" href="/guides/hot-module-replacement/#via-the-nodejs-api">Via the Node.js API</a></li><li class="sidebar-item__anchor" title="Gotchas"><a class="" href="/guides/hot-module-replacement/#gotchas">Gotchas</a></li><li class="sidebar-item__anchor" title="HMR with Stylesheets"><a class="" href="/guides/hot-module-replacement/#hmr-with-stylesheets">HMR with Stylesheets</a></li><li class="sidebar-item__anchor" title="Other Code and Frameworks"><a class="" href="/guides/hot-module-replacement/#other-code-and-frameworks">Other Code and Frameworks</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/tree-shaking/">Tree Shaking</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Add a Utility"><a class="" href="/guides/tree-shaking/#add-a-utility">Add a Utility</a></li><li class="sidebar-item__anchor" title="Mark the file as side-effect-free"><a class="" href="/guides/tree-shaking/#mark-the-file-as-side-effect-free">Mark the file as side-effect-free</a></li><li class="sidebar-item__anchor" title="Clarifying tree shaking and sideEffects"><a class="" href="/guides/tree-shaking/#clarifying-tree-shaking-and-sideeffects">Clarifying tree shaking and sideEffects</a></li><li class="sidebar-item__anchor" title="Mark a function call as side-effect-free"><a class="" href="/guides/tree-shaking/#mark-a-function-call-as-side-effect-free">Mark a function call as side-effect-free</a></li><li class="sidebar-item__anchor" title="Minify the Output"><a class="" href="/guides/tree-shaking/#minify-the-output">Minify the Output</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/tree-shaking/#conclusion">Conclusion</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/production/">Production</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Setup"><a class="" href="/guides/production/#setup">Setup</a></li><li class="sidebar-item__anchor" title="NPM Scripts"><a class="" href="/guides/production/#npm-scripts">NPM Scripts</a></li><li class="sidebar-item__anchor" title="Specify the Mode"><a class="" href="/guides/production/#specify-the-mode">Specify the Mode</a></li><li class="sidebar-item__anchor" title="Minification"><a class="" href="/guides/production/#minification">Minification</a></li><li class="sidebar-item__anchor" title="Source Mapping"><a class="" href="/guides/production/#source-mapping">Source Mapping</a></li><li class="sidebar-item__anchor" title="Minimize CSS"><a class="" href="/guides/production/#minimize-css">Minimize CSS</a></li><li class="sidebar-item__anchor" title="CLI Alternatives"><a class="" href="/guides/production/#cli-alternatives">CLI Alternatives</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/lazy-loading/">Lazy Loading</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Example"><a class="" href="/guides/lazy-loading/#example">Example</a></li><li class="sidebar-item__anchor" title="Frameworks"><a class="" href="/guides/lazy-loading/#frameworks">Frameworks</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/ecma-script-modules/">ECMAScript Modules</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Exporting"><a class="" href="/guides/ecma-script-modules/#exporting">Exporting</a></li><li class="sidebar-item__anchor" title="Importing"><a class="" href="/guides/ecma-script-modules/#importing">Importing</a></li><li class="sidebar-item__anchor" title="Flagging modules as ESM"><a class="" href="/guides/ecma-script-modules/#flagging-modules-as-esm">Flagging modules as ESM</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/shimming/">Shimming</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Shimming Globals"><a class="" href="/guides/shimming/#shimming-globals">Shimming Globals</a></li><li class="sidebar-item__anchor" title="Granular Shimming"><a class="" href="/guides/shimming/#granular-shimming">Granular Shimming</a></li><li class="sidebar-item__anchor" title="Global Exports"><a class="" href="/guides/shimming/#global-exports">Global Exports</a></li><li class="sidebar-item__anchor" title="Loading Polyfills"><a class="" href="/guides/shimming/#loading-polyfills">Loading Polyfills</a></li><li class="sidebar-item__anchor" title="Further Optimizations"><a class="" href="/guides/shimming/#further-optimizations">Further Optimizations</a></li><li class="sidebar-item__anchor" title="Node Built-Ins"><a class="" href="/guides/shimming/#node-built-ins">Node Built-Ins</a></li><li class="sidebar-item__anchor" title="Other Utilities"><a class="" href="/guides/shimming/#other-utilities">Other Utilities</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/typescript/">TypeScript</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Basic Setup"><a class="" href="/guides/typescript/#basic-setup">Basic Setup</a></li><li class="sidebar-item__anchor" title="Ways to Use TypeScript in webpack.config.ts"><a class="" href="/guides/typescript/#ways-to-use-typescript-in-webpackconfigts">Ways to Use TypeScript in webpack.config.ts</a></li><li class="sidebar-item__anchor" title="Loader"><a class="" href="/guides/typescript/#loader">Loader</a></li><li class="sidebar-item__anchor" title="Source Maps"><a class="" href="/guides/typescript/#source-maps">Source Maps</a></li><li class="sidebar-item__anchor" title="Client types"><a class="" href="/guides/typescript/#client-types">Client types</a></li><li class="sidebar-item__anchor" title="Using Third Party Libraries"><a class="" href="/guides/typescript/#using-third-party-libraries">Using Third Party Libraries</a></li><li class="sidebar-item__anchor" title="Importing Other Assets"><a class="" href="/guides/typescript/#importing-other-assets">Importing Other Assets</a></li><li class="sidebar-item__anchor" title="Build Performance"><a class="" href="/guides/typescript/#build-performance">Build Performance</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/web-workers/">Web Workers</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Syntax"><a class="" href="/guides/web-workers/#syntax">Syntax</a></li><li class="sidebar-item__anchor" title="Example"><a class="" href="/guides/web-workers/#example">Example</a></li><li class="sidebar-item__anchor" title="Node.js"><a class="" href="/guides/web-workers/#nodejs">Node.js</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/progressive-web-application/">Progressive Web Application</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="We Don't Work Offline Now"><a class="" href="/guides/progressive-web-application/#we-dont-work-offline-now">We Don't Work Offline Now</a></li><li class="sidebar-item__anchor" title="Adding Workbox"><a class="" href="/guides/progressive-web-application/#adding-workbox">Adding Workbox</a></li><li class="sidebar-item__anchor" title="Registering Our Service Worker"><a class="" href="/guides/progressive-web-application/#registering-our-service-worker">Registering Our Service Worker</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/progressive-web-application/#conclusion">Conclusion</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/public-path/">Public Path</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Use Cases"><a class="" href="/guides/public-path/#use-cases">Use Cases</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Environment Based"><a class="" href="/guides/public-path/#environment-based">Environment Based</a></li><li class="sidebar-item__anchor" title="On The Fly"><a class="" href="/guides/public-path/#on-the-fly">On The Fly</a></li><li class="sidebar-item__anchor" title="Automatic publicPath"><a class="" href="/guides/public-path/#automatic-publicpath">Automatic publicPath</a></li></ul></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/integrations/">Integrations</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="NPM Scripts"><a class="" href="/guides/integrations/#npm-scripts">NPM Scripts</a></li><li class="sidebar-item__anchor" title="Grunt"><a class="" href="/guides/integrations/#grunt">Grunt</a></li><li class="sidebar-item__anchor" title="Gulp"><a class="" href="/guides/integrations/#gulp">Gulp</a></li><li class="sidebar-item__anchor" title="Mocha"><a class="" href="/guides/integrations/#mocha">Mocha</a></li><li class="sidebar-item__anchor" title="Karma"><a class="" href="/guides/integrations/#karma">Karma</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/asset-modules/">Asset Modules</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Public Path"><a class="" href="/guides/asset-modules/#public-path">Public Path</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="On The Fly Override"><a class="" href="/guides/asset-modules/#on-the-fly-override">On The Fly Override</a></li></ul></li><li class="sidebar-item__anchor" title="Resource assets"><a class="" href="/guides/asset-modules/#resource-assets">Resource assets</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Custom output filename"><a class="" href="/guides/asset-modules/#custom-output-filename">Custom output filename</a></li></ul></li><li class="sidebar-item__anchor" title="Inlining assets"><a class="" href="/guides/asset-modules/#inlining-assets">Inlining assets</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Custom data URI generator"><a class="" href="/guides/asset-modules/#custom-data-uri-generator">Custom data URI generator</a></li></ul></li><li class="sidebar-item__anchor" title="Source assets"><a class="" href="/guides/asset-modules/#source-assets">Source assets</a></li><li class="sidebar-item__anchor" title="URL assets"><a class="" href="/guides/asset-modules/#url-assets">URL assets</a></li><li class="sidebar-item__anchor" title="General asset type"><a class="" href="/guides/asset-modules/#general-asset-type">General asset type</a></li><li class="sidebar-item__anchor" title="Replacing Inline Loader Syntax"><a class="" href="/guides/asset-modules/#replacing-inline-loader-syntax">Replacing Inline Loader Syntax</a></li><li class="sidebar-item__anchor" title="Disable emitting assets"><a class="" href="/guides/asset-modules/#disable-emitting-assets">Disable emitting assets</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/entry-advanced/">Advanced entry</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Multiple file types per entry"><a class="" href="/guides/entry-advanced/#multiple-file-types-per-entry">Multiple file types per entry</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/guides/package-exports/">Package exports</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="General syntax"><a class="" href="/guides/package-exports/#general-syntax">General syntax</a></li><li class="sidebar-item__anchor" title="Alternatives"><a class="" href="/guides/package-exports/#alternatives">Alternatives</a></li><li class="sidebar-item__anchor" title="Conditional syntax"><a class="" href="/guides/package-exports/#conditional-syntax">Conditional syntax</a></li><li class="sidebar-item__anchor" title="Abbreviation"><a class="" href="/guides/package-exports/#abbreviation">Abbreviation</a></li><li class="sidebar-item__anchor" title="Notes about ordering"><a class="" href="/guides/package-exports/#notes-about-ordering">Notes about ordering</a></li><li class="sidebar-item__anchor" title="Support"><a class="" href="/guides/package-exports/#support">Support</a></li><li class="sidebar-item__anchor" title="Conditions"><a class="" href="/guides/package-exports/#conditions">Conditions</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Reference syntax"><a class="" href="/guides/package-exports/#reference-syntax">Reference syntax</a></li><li class="sidebar-item__anchor" title="Optimizations"><a class="" href="/guides/package-exports/#optimizations">Optimizations</a></li><li class="sidebar-item__anchor" title="Target environment"><a class="" href="/guides/package-exports/#target-environment">Target environment</a></li><li class="sidebar-item__anchor" title="Conditions: Preprocessor and runtimes"><a class="" href="/guides/package-exports/#conditions-preprocessor-and-runtimes">Conditions: Preprocessor and runtimes</a></li><li class="sidebar-item__anchor" title="Conditions: Custom"><a class="" href="/guides/package-exports/#conditions-custom">Conditions: Custom</a></li></ul></li><li class="sidebar-item__anchor" title="Common patterns"><a class="" href="/guides/package-exports/#common-patterns">Common patterns</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Target environment independent packages"><a class="" href="/guides/package-exports/#target-environment-independent-packages">Target environment independent packages</a></li><li class="sidebar-item__anchor" title="Providing devtools or production optimizations"><a class="" href="/guides/package-exports/#providing-devtools-or-production-optimizations">Providing devtools or production optimizations</a></li><li class="sidebar-item__anchor" title="Providing different versions depending on target environment"><a class="" href="/guides/package-exports/#providing-different-versions-depending-on-target-environment">Providing different versions depending on target environment</a></li><li class="sidebar-item__anchor" title="Combining patterns"><a class="" href="/guides/package-exports/#combining-patterns">Combining patterns</a></li></ul></li><li class="sidebar-item__anchor" title="Guidelines"><a class="" href="/guides/package-exports/#guidelines">Guidelines</a></li></ul></div></div></div></nav><section class="page"><div class="markdown"><h1>Code Splitting</h1><div id="md-content"><aside class="tip"><h6 class="tip__prefix">tip</h6><p>This guide extends the example provided in <a href="/guides/getting-started">Getting Started</a>. Please make sure you are at least familiar with the example provided there and the <a href="/guides/output-management/">Output Management</a> chapter.</p></aside> <p>Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.</p> <p>There are three general approaches to code splitting available:</p> <ul> <li><strong>Entry Points</strong>: Manually split code using <a href="/configuration/entry-context"><code>entry</code></a> configuration.</li> <li><strong>Prevent Duplication</strong>: Use <a href="/configuration/entry-context/#dependencies">Entry dependencies</a> or <a href="/plugins/split-chunks-plugin/"><code>SplitChunksPlugin</code></a> to dedupe and split chunks.</li> <li><strong>Dynamic Imports</strong>: Split code via inline function calls within modules.</li> </ul> <h2><span id="entry-points"></span>Entry Points<a href="#entry-points" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>This is by far the easiest and most intuitive way to split code. However, it is more manual and has some pitfalls we will go over. Let's take a look at how we might split another module from the main bundle:</p> <p><strong>project</strong></p> <pre><code class="hljs language-diff">webpack-demo |- package.json |- package-lock.json |- webpack.config.js |- /dist |- /src <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> |- index.js </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> |- another-module.js </span></span>|- /node_modules</code></pre> <p><strong>another-module.js</strong></p> <pre><code class="hljs language-js"><span class="token keyword">import</span> _ <span class="token keyword">from</span> <span class="token string">'lodash'</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>_<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Another'</span><span class="token punctuation">,</span> <span class="token string">'module'</span><span class="token punctuation">,</span> <span class="token string">'loaded!'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> entry: './src/index.js', </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> mode: 'development', </span><span class="token prefix inserted">+</span><span class="token line"> entry: { </span><span class="token prefix inserted">+</span><span class="token line"> index: './src/index.js', </span><span class="token prefix inserted">+</span><span class="token line"> another: './src/another-module.js', </span><span class="token prefix inserted">+</span><span class="token line"> }, </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> output: { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> filename: 'main.js', </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> filename: '[name].bundle.js', </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <p>This will yield the following build result:</p> <pre><code class="hljs language-bash"><span class="token punctuation">..</span>. <span class="token punctuation">[</span>webpack-cli<span class="token punctuation">]</span> Compilation finished asset index.bundle.js <span class="token number">553</span> KiB <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: index<span class="token punctuation">)</span> asset another.bundle.js <span class="token number">553</span> KiB <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: another<span class="token punctuation">)</span> runtime modules <span class="token number">2.49</span> KiB <span class="token number">12</span> modules cacheable modules <span class="token number">530</span> KiB ./src/index.js <span class="token number">257</span> bytes <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> ./src/another-module.js <span class="token number">84</span> bytes <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> ./node_modules/lodash/lodash.js <span class="token number">530</span> KiB <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> webpack <span class="token number">5.4</span>.0 compiled successfully <span class="token keyword">in</span> <span class="token number">245</span> ms</code></pre> <p>As mentioned there are some pitfalls to this approach:</p> <ul> <li>If there are any duplicated modules between entry chunks they will be included in both bundles.</li> <li>It isn't as flexible and can't be used to dynamically split code with the core application logic.</li> </ul> <p>The first of these two points is definitely an issue for our example, as <code>lodash</code> is also imported within <code>./src/index.js</code> and will thus be duplicated in both bundles. Let's remove this duplication in next section.</p> <h2><span id="prevent-duplication"></span>Prevent Duplication<a href="#prevent-duplication" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <h3><span id="entry-dependencies"></span>Entry dependencies<a href="#entry-dependencies" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h3> <p>The <a href="/configuration/entry-context/#dependencies"><code>dependOn</code> option</a> allows to share the modules between the chunks:</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span><span class="token prefix unchanged"> </span><span class="token line"> mode: 'development', </span><span class="token prefix unchanged"> </span><span class="token line"> entry: { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> index: './src/index.js', </span><span class="token prefix deleted">-</span><span class="token line"> another: './src/another-module.js', </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> index: { </span><span class="token prefix inserted">+</span><span class="token line"> import: './src/index.js', </span><span class="token prefix inserted">+</span><span class="token line"> dependOn: 'shared', </span><span class="token prefix inserted">+</span><span class="token line"> }, </span><span class="token prefix inserted">+</span><span class="token line"> another: { </span><span class="token prefix inserted">+</span><span class="token line"> import: './src/another-module.js', </span><span class="token prefix inserted">+</span><span class="token line"> dependOn: 'shared', </span><span class="token prefix inserted">+</span><span class="token line"> }, </span><span class="token prefix inserted">+</span><span class="token line"> shared: 'lodash', </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> output: { </span><span class="token prefix unchanged"> </span><span class="token line"> filename: '[name].bundle.js', </span><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <p>If we're going to use multiple entry points on a single HTML page, <code>optimization.runtimeChunk: 'single'</code> is needed too, otherwise we could get into trouble described <a href="https://bundlers.tooling.report/code-splitting/multi-entry/">here</a>.</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span><span class="token prefix unchanged"> </span><span class="token line"> mode: 'development', </span><span class="token prefix unchanged"> </span><span class="token line"> entry: { </span><span class="token prefix unchanged"> </span><span class="token line"> index: { </span><span class="token prefix unchanged"> </span><span class="token line"> import: './src/index.js', </span><span class="token prefix unchanged"> </span><span class="token line"> dependOn: 'shared', </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> another: { </span><span class="token prefix unchanged"> </span><span class="token line"> import: './src/another-module.js', </span><span class="token prefix unchanged"> </span><span class="token line"> dependOn: 'shared', </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> shared: 'lodash', </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> output: { </span><span class="token prefix unchanged"> </span><span class="token line"> filename: '[name].bundle.js', </span><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> optimization: { </span><span class="token prefix inserted">+</span><span class="token line"> runtimeChunk: 'single', </span><span class="token prefix inserted">+</span><span class="token line"> }, </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <p>And here's the result of build:</p> <pre><code class="hljs language-bash"><span class="token punctuation">..</span>. <span class="token punctuation">[</span>webpack-cli<span class="token punctuation">]</span> Compilation finished asset shared.bundle.js <span class="token number">549</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: shared<span class="token punctuation">)</span> asset runtime.bundle.js <span class="token number">7.79</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: runtime<span class="token punctuation">)</span> asset index.bundle.js <span class="token number">1.77</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: index<span class="token punctuation">)</span> asset another.bundle.js <span class="token number">1.65</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: another<span class="token punctuation">)</span> Entrypoint index <span class="token number">1.77</span> KiB <span class="token operator">=</span> index.bundle.js Entrypoint another <span class="token number">1.65</span> KiB <span class="token operator">=</span> another.bundle.js Entrypoint shared <span class="token number">557</span> KiB <span class="token operator">=</span> runtime.bundle.js <span class="token number">7.79</span> KiB shared.bundle.js <span class="token number">549</span> KiB runtime modules <span class="token number">3.76</span> KiB <span class="token number">7</span> modules cacheable modules <span class="token number">530</span> KiB ./node_modules/lodash/lodash.js <span class="token number">530</span> KiB <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> ./src/another-module.js <span class="token number">84</span> bytes <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> ./src/index.js <span class="token number">257</span> bytes <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> webpack <span class="token number">5.4</span>.0 compiled successfully <span class="token keyword">in</span> <span class="token number">249</span> ms</code></pre> <p>As you can see there's another <code>runtime.bundle.js</code> file generated besides <code>shared.bundle.js</code>, <code>index.bundle.js</code> and <code>another.bundle.js</code>.</p> <p>Although using multiple entry points per page is allowed in webpack, it should be avoided when possible in favor of an entry point with multiple imports: <code>entry: { page: ['./analytics', './app'] }</code>. This results in a better optimization and consistent execution order when using <code>async</code> script tags.</p> <h3><span id="splitchunksplugin"></span>SplitChunksPlugin<a href="#splitchunksplugin" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h3> <p>The <a href="/plugins/split-chunks-plugin/"><code>SplitChunksPlugin</code></a> allows us to extract common dependencies into an existing entry chunk or an entirely new chunk. Let's use this to de-duplicate the <code>lodash</code> dependency from the previous example:</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> const path = require('path'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> module.exports = { </span><span class="token prefix unchanged"> </span><span class="token line"> mode: 'development', </span><span class="token prefix unchanged"> </span><span class="token line"> entry: { </span><span class="token prefix unchanged"> </span><span class="token line"> index: './src/index.js', </span><span class="token prefix unchanged"> </span><span class="token line"> another: './src/another-module.js', </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> output: { </span><span class="token prefix unchanged"> </span><span class="token line"> filename: '[name].bundle.js', </span><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> optimization: { </span><span class="token prefix inserted">+</span><span class="token line"> splitChunks: { </span><span class="token prefix inserted">+</span><span class="token line"> chunks: 'all', </span><span class="token prefix inserted">+</span><span class="token line"> }, </span><span class="token prefix inserted">+</span><span class="token line"> }, </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> };</span></span></code></pre> <p>With the <a href="/plugins/split-chunks-plugin/#optimizationsplitchunks"><code>optimization.splitChunks</code></a> configuration option in place, we should now see the duplicate dependency removed from our <code>index.bundle.js</code> and <code>another.bundle.js</code>. The plugin should notice that we've separated <code>lodash</code> out to a separate chunk and remove the dead weight from our main bundle. However, it's important to note that common dependencies are only extracted into a separate chunk if they meet the <a href="/plugins/split-chunks-plugin/#splitchunksminsize">size thresholds</a> specified by webpack.</p> <p>Let's do an <code>npm run build</code> to see if it worked:</p> <pre><code class="hljs language-bash"><span class="token punctuation">..</span>. <span class="token punctuation">[</span>webpack-cli<span class="token punctuation">]</span> Compilation finished asset vendors-node_modules_lodash_lodash_js.bundle.js <span class="token number">549</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>id hint: vendors<span class="token punctuation">)</span> asset index.bundle.js <span class="token number">8.92</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: index<span class="token punctuation">)</span> asset another.bundle.js <span class="token number">8.8</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: another<span class="token punctuation">)</span> Entrypoint index <span class="token number">558</span> KiB <span class="token operator">=</span> vendors-node_modules_lodash_lodash_js.bundle.js <span class="token number">549</span> KiB index.bundle.js <span class="token number">8.92</span> KiB Entrypoint another <span class="token number">558</span> KiB <span class="token operator">=</span> vendors-node_modules_lodash_lodash_js.bundle.js <span class="token number">549</span> KiB another.bundle.js <span class="token number">8.8</span> KiB runtime modules <span class="token number">7.64</span> KiB <span class="token number">14</span> modules cacheable modules <span class="token number">530</span> KiB ./src/index.js <span class="token number">257</span> bytes <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> ./src/another-module.js <span class="token number">84</span> bytes <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> ./node_modules/lodash/lodash.js <span class="token number">530</span> KiB <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> webpack <span class="token number">5.4</span>.0 compiled successfully <span class="token keyword">in</span> <span class="token number">241</span> ms</code></pre> <p>Here are some other useful plugins and loaders provided by the community for splitting code:</p> <ul> <li><a href="/plugins/mini-css-extract-plugin"><code>mini-css-extract-plugin</code></a>: Useful for splitting CSS out from the main application.</li> </ul> <h2><span id="dynamic-imports"></span>Dynamic Imports<a href="#dynamic-imports" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Two similar techniques are supported by webpack when it comes to dynamic code splitting. The first and recommended approach is to use the <a href="/api/module-methods/#import-1"><code>import()</code> syntax</a> that conforms to the <a href="https://github.com/tc39/proposal-dynamic-import">ECMAScript proposal</a> for dynamic imports. The legacy, webpack-specific approach is to use <a href="/api/module-methods/#requireensure"><code>require.ensure</code></a>. Let's try using the first of these two approaches...</p> <aside class="warning"><h6 class="warning__prefix">warning</h6><p><code>import()</code> calls use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> internally. If you use <code>import()</code> with older browsers (e.g., IE 11), remember to shim <code>Promise</code> using a polyfill such as <a href="https://github.com/stefanpenner/es6-promise">es6-promise</a> or <a href="https://github.com/taylorhakes/promise-polyfill">promise-polyfill</a>.</p></aside> <p>Before we start, let's remove the extra <a href="/concepts/entry-points/"><code>entry</code></a> and <a href="/plugins/split-chunks-plugin"><code>optimization.splitChunks</code></a> from our configuration in the above example as they won't be needed for this next demonstration:</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span><span class="token prefix unchanged"> </span><span class="token line"> mode: 'development', </span><span class="token prefix unchanged"> </span><span class="token line"> entry: { </span><span class="token prefix unchanged"> </span><span class="token line"> index: './src/index.js', </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> another: './src/another-module.js', </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> output: { </span><span class="token prefix unchanged"> </span><span class="token line"> filename: '[name].bundle.js', </span><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> optimization: { </span><span class="token prefix deleted">-</span><span class="token line"> splitChunks: { </span><span class="token prefix deleted">-</span><span class="token line"> chunks: 'all', </span><span class="token prefix deleted">-</span><span class="token line"> }, </span><span class="token prefix deleted">-</span><span class="token line"> }, </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <p>We'll also update our project to remove the now unused files:</p> <p><strong>project</strong></p> <pre><code class="hljs language-diff">webpack-demo |- package.json |- package-lock.json |- webpack.config.js |- /dist |- /src <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> |- index.js </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> |- another-module.js </span></span>|- /node_modules</code></pre> <p>Now, instead of statically importing <code>lodash</code>, we'll use dynamic importing to separate a chunk:</p> <p><strong>src/index.js</strong></p> <pre><code class="hljs language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import _ from 'lodash'; </span><span class="token prefix deleted">-</span><span class="token line"> </span><span class="token prefix deleted">-</span><span class="token line">function component() { </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">function getComponent() { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> const element = document.createElement('div'); </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> // Lodash, now imported by this script </span><span class="token prefix deleted">-</span><span class="token line"> element.innerHTML = _.join(['Hello', 'webpack'], ' '); </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> return import('lodash') </span><span class="token prefix inserted">+</span><span class="token line"> .then(({ default: _ }) => { </span><span class="token prefix inserted">+</span><span class="token line"> const element = document.createElement('div'); </span><span class="token prefix inserted">+</span><span class="token line"> </span><span class="token prefix inserted">+</span><span class="token line"> element.innerHTML = _.join(['Hello', 'webpack'], ' '); </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> return element; </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> return element; </span><span class="token prefix inserted">+</span><span class="token line"> }) </span><span class="token prefix inserted">+</span><span class="token line"> .catch((error) => 'An error occurred while loading the component'); </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">} </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">document.body.appendChild(component()); </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">getComponent().then((component) => { </span><span class="token prefix inserted">+</span><span class="token line"> document.body.appendChild(component); </span><span class="token prefix inserted">+</span><span class="token line">});</span></span></code></pre> <p>The reason we need <code>default</code> is that since webpack 4, when importing a CommonJS module, the import will no longer resolve to the value of <code>module.exports</code>, it will instead create an artificial namespace object for the CommonJS module. For more information on the reason behind this, read <a href="https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655">webpack 4: import() and CommonJs</a>.</p> <p>Let's run webpack to see <code>lodash</code> separated out to a separate bundle:</p> <pre><code class="hljs language-bash"><span class="token punctuation">..</span>. <span class="token punctuation">[</span>webpack-cli<span class="token punctuation">]</span> Compilation finished asset vendors-node_modules_lodash_lodash_js.bundle.js <span class="token number">549</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>id hint: vendors<span class="token punctuation">)</span> asset index.bundle.js <span class="token number">13.5</span> KiB <span class="token punctuation">[</span>compared <span class="token keyword">for</span> emit<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: index<span class="token punctuation">)</span> runtime modules <span class="token number">7.37</span> KiB <span class="token number">11</span> modules cacheable modules <span class="token number">530</span> KiB ./src/index.js <span class="token number">434</span> bytes <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> ./node_modules/lodash/lodash.js <span class="token number">530</span> KiB <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> webpack <span class="token number">5.4</span>.0 compiled successfully <span class="token keyword">in</span> <span class="token number">268</span> ms</code></pre> <p>As <code>import()</code> returns a promise, it can be used with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code> functions</a>. Here's how it would simplify the code:</p> <p><strong>src/index.js</strong></p> <pre><code class="hljs language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">function getComponent() { </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">async function getComponent() { </span><span class="token prefix inserted">+</span><span class="token line"> const element = document.createElement('div'); </span><span class="token prefix inserted">+</span><span class="token line"> const { default: _ } = await import('lodash'); </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> return import('lodash') </span><span class="token prefix deleted">-</span><span class="token line"> .then(({ default: _ }) => { </span><span class="token prefix deleted">-</span><span class="token line"> const element = document.createElement('div'); </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> element.innerHTML = _.join(['Hello', 'webpack'], ' '); </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> element.innerHTML = _.join(['Hello', 'webpack'], ' '); </span><span class="token prefix deleted">-</span><span class="token line"> </span><span class="token prefix deleted">-</span><span class="token line"> return element; </span><span class="token prefix deleted">-</span><span class="token line"> }) </span><span class="token prefix deleted">-</span><span class="token line"> .catch((error) => 'An error occurred while loading the component'); </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> return element; </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">} </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">getComponent().then((component) => { </span><span class="token prefix unchanged"> </span><span class="token line"> document.body.appendChild(component); </span><span class="token prefix unchanged"> </span><span class="token line">});</span></span></code></pre> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>It is possible to provide a <a href="/api/module-methods/#dynamic-expressions-in-import">dynamic expression</a> to <code>import()</code> when you might need to import specific module based on a computed variable later.</p></aside> <h2><span id="prefetchingpreloading-modules"></span>Prefetching/Preloading modules<a href="#prefetchingpreloading-modules" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Webpack 4.6.0+ adds support for prefetching and preloading.</p> <p>Using these inline directives while declaring your imports allows webpack to output “Resource Hint” which tells the browser that for:</p> <ul> <li><strong>prefetch</strong>: resource is probably needed for some navigation in the future</li> <li><strong>preload</strong>: resource will also be needed during the current navigation</li> </ul> <p>An example of this is having a <code>HomePage</code> component, which renders a <code>LoginButton</code> component which then on demand loads a <code>LoginModal</code> component after being clicked.</p> <p><strong>LoginButton.js</strong></p> <pre><code class="hljs language-js"><span class="token comment">//...</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackPrefetch: true */</span> <span class="token string">'./path/to/LoginModal.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <p>This will result in <code><link rel="prefetch" href="login-modal-chunk.js"></code> being appended in the head of the page, which will instruct the browser to prefetch in idle time the <code>login-modal-chunk.js</code> file.</p> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>webpack will add the prefetch hint once the parent chunk has been loaded.</p></aside> <p>Preload directive has a bunch of differences compared to prefetch:</p> <ul> <li>A preloaded chunk starts loading in parallel to the parent chunk. A prefetched chunk starts after the parent chunk finishes loading.</li> <li>A preloaded chunk has medium priority and is instantly downloaded. A prefetched chunk is downloaded while the browser is idle.</li> <li>A preloaded chunk should be instantly requested by the parent chunk. A prefetched chunk can be used anytime in the future.</li> <li>Browser support is different.</li> </ul> <p>An example of this can be having a <code>Component</code> which always depends on a big library that should be in a separate chunk.</p> <p>Let's imagine a component <code>ChartComponent</code> which needs a huge <code>ChartingLibrary</code>. It displays a <code>LoadingIndicator</code> when rendered and instantly does an on demand import of <code>ChartingLibrary</code>:</p> <p><strong>ChartComponent.js</strong></p> <pre><code class="hljs language-js"><span class="token comment">//...</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackPreload: true */</span> <span class="token string">'ChartingLibrary'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <p>When a page which uses the <code>ChartComponent</code> is requested, the charting-library-chunk is also requested via <code><link rel="preload"></code>. Assuming the page-chunk is smaller and finishes faster, the page will be displayed with a <code>LoadingIndicator</code>, until the already requested <code>charting-library-chunk</code> finishes. This will give a little load time boost since it only needs one round-trip instead of two. Especially in high-latency environments.</p> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>Using <code>webpackPreload</code> incorrectly can actually hurt performance, so be careful when using it.</p></aside> <p>Sometimes you need to have your own control over preload. For example, preload of any dynamic import can be done via async script. This can be useful in case of streaming server side rendering.</p> <pre><code class="hljs language-js"><span class="token keyword">const</span> <span class="token function-variable function">lazyComp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'DynamicComponent'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// Do something with the error.</span> <span class="token comment">// For example, we can retry the request in case of any net error</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <p>If the script loading will fail before webpack starts loading of that script by itself (webpack creates a script tag to load its code, if that script is not on a page), that catch handler won't start till <a href="/configuration/output/#outputchunkloadtimeout">chunkLoadTimeout</a> is not passed. This behavior can be unexpected. But it's explainable — webpack can not throw any error, cause webpack doesn't know, that script failed. Webpack will add onerror handler to the script right after the error has happen.</p> <p>To prevent such problem you can add your own onerror handler, which removes the script in case of any error:</p> <pre><code class="hljs language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/dist/dynamicComponent.js<span class="token punctuation">"</span></span> <span class="token attr-name">async</span> <span class="token attr-name">onerror</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>this.remove()<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre> <p>In that case, errored script will be removed. Webpack will create its own script and any error will be processed without any timeouts.</p> <h2><span id="bundle-analysis"></span>Bundle Analysis<a href="#bundle-analysis" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Once you start splitting your code, it can be useful to analyze the output to check where modules have ended up. The <a href="https://github.com/webpack/analyse">official analyze tool</a> is a good place to start. There are some other community-supported options out there as well:</p> <ul> <li><a href="https://alexkuz.github.io/webpack-chart/">webpack-chart</a>: Interactive pie chart for webpack stats.</li> <li><a href="https://chrisbateman.github.io/webpack-visualizer/">webpack-visualizer</a>: Visualize and analyze your bundles to see which modules are taking up space and which might be duplicates.</li> <li><a href="https://github.com/webpack-contrib/webpack-bundle-analyzer">webpack-bundle-analyzer</a>: A plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.</li> <li><a href="https://webpack.jakoblind.no/optimize">webpack bundle optimize helper</a>: This tool will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.</li> <li><a href="https://github.com/bundle-stats/bundle-stats">bundle-stats</a>: Generate a bundle report(bundle size, assets, modules) and compare the results between different builds.</li> <li><a href="https://github.com/moonrailgun/webpack-stats-viewer">webpack-stats-viewer</a>: A plugin with build for webpack stats. Show more information about webpack bundle detail.</li> </ul> <h2><span id="next-steps"></span>Next Steps<a href="#next-steps" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>See <a href="/guides/lazy-loading/">Lazy Loading</a> for a more concrete example of how <code>import()</code> can be used in a real application and <a href="/guides/caching/">Caching</a> to learn how to split code more effectively.</p></div><div class="print:hidden"><h2>Further Reading</h2><ul><li><a href="https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c" target="_blank" rel="noopener noreferrer"><link rel="prefetch/preload" /> in webpack</a></li><li><a href="https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf" target="_blank" rel="noopener noreferrer">Preload, Prefetch And Priorities in Chrome</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content" target="_blank" rel="noopener noreferrer">Preloading content with <link rel="preload" /></a></li></ul></div><div class="print:hidden mt-20"><a class="text-gray-500 dark:text-gray-500 text-sm cursor-pointer font-sans hover:underline" href="https://github.com/webpack/webpack.js.org/edit/main/src/content/guides/code-splitting.mdx">Edit this page</a><span class="mx-5 text-black font-bold dark:text-white">·</span><a class="text-gray-500 dark:text-gray-500 text-sm cursor-pointer font-sans hover:underline">Print this page</a></div><div class="adjacent-links print:hidden"><div class="adjacent-links__prev"><div>« Previous</div><a class="adjacent-links__link" href="/guides/development/">Development</a></div><div class="adjacent-links__next"><div class="adjacent-links__label--next">Next »</div><a class="adjacent-links__link" href="/guides/caching/">Caching</a></div></div><div data-testid="contributors" class="print:hidden"><h2 class="!font-sans !font-normal">33<!-- --> <!-- -->Contributors</h2><div><div class="grid gap-[10px] lg:gap-[15px] grid-cols-contributors"><a href="https://github.com/pksjce"><img width="45" height="45" alt="pksjce" title="pksjce" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/pastelsky"><img width="45" height="45" alt="pastelsky" title="pastelsky" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/simon04"><img width="45" height="45" alt="simon04" title="simon04" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/jonwheeler"><img width="45" height="45" alt="jonwheeler" title="jonwheeler" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/johnstew"><img width="45" height="45" alt="johnstew" title="johnstew" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/shinxi"><img width="45" height="45" alt="shinxi" title="shinxi" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/tomtasche"><img width="45" height="45" alt="tomtasche" title="tomtasche" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/levy9527"><img width="45" height="45" alt="levy9527" title="levy9527" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/rahulcs"><img width="45" height="45" alt="rahulcs" title="rahulcs" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/chrisVillanueva"><img width="45" height="45" alt="chrisVillanueva" title="chrisVillanueva" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/rafde"><img width="45" height="45" alt="rafde" title="rafde" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/shaunwallace"><img width="45" height="45" alt="shaunwallace" title="shaunwallace" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/skipjack"><img width="45" height="45" alt="skipjack" title="skipjack" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/jakearchibald"><img width="45" height="45" alt="jakearchibald" title="jakearchibald" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/TheDutchCoder"><img width="45" height="45" alt="TheDutchCoder" title="TheDutchCoder" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/rouzbeh84"><img width="45" height="45" alt="rouzbeh84" title="rouzbeh84" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/shaodahong"><img width="45" height="45" alt="shaodahong" title="shaodahong" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/sudarsangp"><img width="45" height="45" alt="sudarsangp" title="sudarsangp" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/kcolton"><img width="45" height="45" alt="kcolton" title="kcolton" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/efreitasn"><img width="45" height="45" alt="efreitasn" title="efreitasn" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/EugeneHlushko"><img width="45" height="45" alt="EugeneHlushko" title="EugeneHlushko" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/Tiendo1011"><img width="45" height="45" alt="Tiendo1011" title="Tiendo1011" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/byzyk"><img width="45" height="45" alt="byzyk" title="byzyk" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/AnayaDesign"><img width="45" height="45" alt="AnayaDesign" title="AnayaDesign" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/wizardofhogwarts"><img width="45" height="45" alt="wizardofhogwarts" title="wizardofhogwarts" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/maximilianschmelzer"><img width="45" height="45" alt="maximilianschmelzer" title="maximilianschmelzer" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/smelukov"><img width="45" height="45" alt="smelukov" title="smelukov" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/chenxsan"><img width="45" height="45" alt="chenxsan" title="chenxsan" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/Adarah"><img width="45" height="45" alt="Adarah" title="Adarah" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/atesgoral"><img width="45" height="45" alt="atesgoral" title="atesgoral" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/snitin315"><img width="45" height="45" alt="snitin315" title="snitin315" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/artem-malko"><img width="45" height="45" alt="artem-malko" title="artem-malko" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a></div></div></div></div></section></div><footer class="footer"><div class="container footer__inner"><section class="footer__left"><a class="footer__link" href="/guides/getting-started/">Get Started</a><a class="footer__link" href="/comparison/">Comparison</a><a href="https://privacy-policy.openjsf.org/" target="_blank" rel="noopener noreferrer" class="footer__link">Privacy Policy</a></section><section class="footer__middle"><a class="footer__icon" href="/"><img src="/icon-square-small.9e8aff7a67a5dd20.svg" alt="webpack icon" width="35" height="35"/></a></section><section class="footer__right"><a href="https://webpack.threadless.com/" target="_blank" rel="noopener noreferrer" class="footer__link">Swag Store</a><a class="footer__link" href="/awesome-webpack/">Awesome webpack</a><a class="footer__link" href="/glossary/">Glossary</a><a class="footer__link" href="/branding/">Branding</a><a href="https://gitter.im/webpack/webpack" target="_blank" rel="noopener noreferrer" class="footer__link">Gitter</a><a href="https://github.com/webpack/webpack/releases" target="_blank" rel="noopener noreferrer" class="footer__link">Changelog</a><a class="footer__link footer__license" href="/license"><img alt="Creative Commons License" src="/cc.185f5779f354f6e9.svg" width="25" height="25"/><img alt="Creative Commons License" src="/by.d2da85793ea9d7bd.svg" width="25" height="25"/></a></section></div></footer></div></div><script src="/vendor.817bc9c70027aefa.js"></script><script src="/index.007696080df8ba1f.js"></script></body>