Webpack Tree Shaking失效疑问：未使用的Math.random为何未被移除？

这是个很典型的 Tree Shaking 边界情况问题，咱们一步步拆解原因：

问题场景回顾 #

先确认你的代码结构：
test.js：

export const ceil = Math.ceil
export const random = Math.random

入口文件：

import { ceil } from './test'
export default ceil(3.3)

压缩后你发现Math.random依然残留，但如果把random改成const random = 1或者字符串这类静态值，就能被正常移除。

核心原因：静态分析的保守策略 #

Tree Shaking（摇树优化）的核心是静态代码分析，它能精准移除那些被导出但未被使用的静态值（比如字面量、直接赋值的常量），但对于Math.random这种“引用内置对象属性”的情况，UglifyjsWebpackPlugin 1.x版本的处理会非常保守：

• 当你写const random = 1时，这是一个完全静态可确定的值，Uglify能明确判断这个变量没有被使用，直接安全移除。
• 但Math.random是对Math对象的属性引用，Uglify 1.x无法100%确定这个引用有没有副作用——比如某些极端场景下，开发者可能重写了Math.random的getter，访问这个属性时会触发额外代码执行。为了避免误删有潜在作用的代码，它会保留这个引用。

简单说，旧版本的Uglify对“非字面量的引用赋值”会采取安全优先的策略，不会贸然移除。

解决思路 #

如果想让未使用的Math.random被正常移除，你可以把它包装成无副作用的函数形式，修改test.js：

export const ceil = Math.ceil
export const random = () => Math.random

这样当random未被使用时，Uglify能识别出这个函数没有被调用，从而安全移除它。

另外，升级工具链也是更彻底的解决方案：Webpack 4+配合terser-webpack-plugin（替代旧的Uglify插件）对这类场景的静态分析能力更强，能更精准地判断无副作用的属性引用，从而正确移除未使用的Math.random。

内容的提问来源于stack exchange，提问作者JJJ