我尝试使webpack tree-shaking删除未使用的babel-polyfill
。
index.js
文件包含:
import 'babel-polyfill'
const add4 = n => n + 4
const add5 = n => n + 5
add4(6)
console.log('boom', add4(4))
在这个文件中没有代码需要任何es2015 + polyfill,所以我期望树摇动删除捆绑输出中未使用的babel-polyfill。事实并非如此,捆绑包仍然包含它们(缩小)。
Here is a git repo with this code。
webpack配置:
const MinifyPlugin = require('babel-minify-webpack-plugin')
module.exports = {
entry: './index.js',
output: {
filename: 'bundle-webpack.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new MinifyPlugin({ mangle: { topLevel: true } }, { comments: false })
]
}
和.babelrc
:
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["chrome >= 50", "iOS >= 10", "ie >= 8"]
},
"useBuiltIns": true,
"modules": false,
"loose": true
}
]
]
}
我试图用babel-minify-webpack-plugin
替换uglifyjs-webpack-plugin
,但它给出了相同的结果。
怎么可能使树摇动工作,输出不包含原始代码中没有使用的任何babel-polyfills
?
现在我意识到babel-polyfill修改了全局范围,树木震动可能没有影响......
这是一个愚蠢的问题:)