时间戳

首页 > 解决方案 > 是否可以使用 Webpack 删除非活动代码？

javascript - 是否可以使用 Webpack 删除非活动代码？

问题描述

我正在将lodash导入我的项目，但主脚本不使用超过 5 个 lodash 函数，我不想用未使用/非活动代码填充我的项目，有没有办法检查整个项目结构并删除捆绑/构建时的非活动代码？

例子：

索引.html

<body>
  <script src="lodash.js"></script>
  <script src="app.js"></script>
</body>

lodash.js

function a() {
  console.log('Hi')
}

function b() {
  console.log('I am not used anywhere')
}

应用程序.js

...
document.getElementById('main').addEventListener('click', a)
...

项目中未使用函数 b()。

问题：

如何自动摆脱非活动代码函数 b()？

标签： javascriptnode.jswebpack

解决方案

您想要的称为Tree Shaking，这是一种确定哪些代码是死代码且不应包含在包中的模式。将它与 Webpack 一起使用的要求之一是使用ES Modules。如果你已经使用 webpack 来打包app.js，你应该import在你的项目中导入 lodash，而不是把它作为依赖添加到你的 html 文件中。

请记住，这只有在 lodash 使用 ES 模块时才有效，如果不是这样，总是有lodash-es

推荐阅读