{"id":11688,"date":"2024-03-14T14:33:09","date_gmt":"2024-03-14T14:33:09","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/"},"modified":"2025-08-04T15:35:16","modified_gmt":"2025-08-04T15:35:16","slug":"how-to-remove-unused-code-in-webpack","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/","title":{"rendered":"Webpack Tree Shaking Guide"},"content":{"rendered":"<p>To remove unnecessary code, you can utilize webpack&#8217;s Tree Shaking feature. Tree Shaking involves identifying and removing unused modules and code through static analysis of the code. To enable Tree Shaking, make sure to use ES6 module syntax (such as import and export) in the webpack configuration file and enable minification in the production environment.<\/p>\n<p>Firstly, in the webpack configuration file, make sure to set the mode to &#8220;production&#8221; and enable the optimization option with minimize set to true.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-variable language_\">module<\/span>.<span class=\"hljs-property\">exports<\/span> = {\r\n  <span class=\"hljs-attr\">mode<\/span>: <span class=\"hljs-string\">'production'<\/span>,\r\n  <span class=\"hljs-attr\">optimization<\/span>: {\r\n    <span class=\"hljs-attr\">minimize<\/span>: <span class=\"hljs-literal\">true<\/span>\r\n  }\r\n};\r\n<\/code><\/pre>\n<p>Next, in the package.json file, make sure you are using module bundling tools that support Tree Shaking, such as babel-loader and @babel\/preset-env.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-punctuation\">{<\/span>\r\n  <span class=\"hljs-attr\">\"devDependencies\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\r\n    <span class=\"hljs-attr\">\"@babel\/core\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^7.0.0\"<\/span><span class=\"hljs-punctuation\">,<\/span>\r\n    <span class=\"hljs-attr\">\"@babel\/preset-env\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^7.0.0\"<\/span><span class=\"hljs-punctuation\">,<\/span>\r\n    <span class=\"hljs-attr\">\"babel-loader\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^8.0.0\"<\/span>\r\n  <span class=\"hljs-punctuation\">}<\/span>\r\n<span class=\"hljs-punctuation\">}<\/span>\r\n<\/code><\/pre>\n<p>Next, in the webpack configuration file, set up babel-loader to recognize ES6 module syntax and enable Tree Shaking.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-variable language_\">module<\/span>.<span class=\"hljs-property\">exports<\/span> = {\r\n  <span class=\"hljs-attr\">module<\/span>: {\r\n    <span class=\"hljs-attr\">rules<\/span>: [\r\n      {\r\n        <span class=\"hljs-attr\">test<\/span>: <span class=\"hljs-regexp\">\/\\.js$\/<\/span>,\r\n        <span class=\"hljs-attr\">exclude<\/span>: <span class=\"hljs-regexp\">\/node_modules\/<\/span>,\r\n        <span class=\"hljs-attr\">use<\/span>: {\r\n          <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'babel-loader'<\/span>,\r\n          <span class=\"hljs-attr\">options<\/span>: {\r\n            <span class=\"hljs-attr\">presets<\/span>: [<span class=\"hljs-string\">'@babel\/preset-env'<\/span>]\r\n          }\r\n        }\r\n      }\r\n    ]\r\n  }\r\n};\r\n<\/code><\/pre>\n<p>Finally, make sure to use ES6 module syntax in your code and avoid manually importing unused modules so that webpack can identify and remove dead code through static analysis.<\/p>\n<p>By following the above steps, you can utilize webpack&#8217;s Tree Shaking feature to remove unnecessary code, reducing the code size and improving performance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To remove unnecessary code, you can utilize webpack&#8217;s Tree Shaking feature. Tree Shaking involves identifying and removing unused modules and code through static analysis of the code. To enable Tree Shaking, make sure to use ES6 module syntax (such as import and export) in the webpack configuration file and enable minification in the production environment. [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[15138,15139,15136,15137,15135],"class_list":["post-11688","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-bundle-optimization","tag-es6-modules","tag-tree-shaking","tag-unused-code","tag-webpack"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Webpack Tree Shaking Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to remove unused code in webpack using tree shaking. Optimize bundles with ES6 modules &amp; minification.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Webpack Tree Shaking Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to remove unused code in webpack using tree shaking. Optimize bundles with ES6 modules &amp; minification.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T14:33:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-04T15:35:16+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"Webpack Tree Shaking Guide\",\"datePublished\":\"2024-03-14T14:33:09+00:00\",\"dateModified\":\"2025-08-04T15:35:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/\"},\"wordCount\":179,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"bundle optimization\",\"ES6 modules\",\"tree shaking\",\"unused code\",\"webpack\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/\",\"name\":\"Webpack Tree Shaking Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T14:33:09+00:00\",\"dateModified\":\"2025-08-04T15:35:16+00:00\",\"description\":\"Learn how to remove unused code in webpack using tree shaking. Optimize bundles with ES6 modules & minification.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webpack Tree Shaking Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Webpack Tree Shaking Guide - Blog - Silicon Cloud","description":"Learn how to remove unused code in webpack using tree shaking. Optimize bundles with ES6 modules & minification.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/","og_locale":"en_US","og_type":"article","og_title":"Webpack Tree Shaking Guide","og_description":"Learn how to remove unused code in webpack using tree shaking. Optimize bundles with ES6 modules & minification.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T14:33:09+00:00","article_modified_time":"2025-08-04T15:35:16+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"Webpack Tree Shaking Guide","datePublished":"2024-03-14T14:33:09+00:00","dateModified":"2025-08-04T15:35:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/"},"wordCount":179,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["bundle optimization","ES6 modules","tree shaking","unused code","webpack"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/","name":"Webpack Tree Shaking Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T14:33:09+00:00","dateModified":"2025-08-04T15:35:16+00:00","description":"Learn how to remove unused code in webpack using tree shaking. Optimize bundles with ES6 modules & minification.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-unused-code-in-webpack\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webpack Tree Shaking Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/11688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=11688"}],"version-history":[{"count":3,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/11688\/revisions"}],"predecessor-version":[{"id":155475,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/11688\/revisions\/155475"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=11688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=11688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=11688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}