考虑到这一点
Webpack 3.8.1
配置。
// common
module.exports = {
context: path.resolve(__dirname, './src'),
entry: [
'whatwg-fetch',
'./index'
],
output: {
path: path.resolve(__dirname, 'build/assets'),
publicPath: '/assets/',
filename: 'main.js'
},
plugins: [
new CleanWebpackPlugin(['build']),
],
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}, {
test: /\.(scss|css)$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}],
}, {
test: /\.(png|jpg|gif|woff2|woff)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}]
}
};
//prod
module.exports = merge(common, {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new UglifyJSPlugin()
],
devtool: 'none'
});
还有这个
Babel 6.26.0
配置
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": [
">1%"
]
}
}
], [
"react"
]
],
"plugins": [
"transform-class-properties",
"transform-export-extensions",
"transform-object-rest-spread",
"react-hot-loader/babel"
]
}
我原以为这棵树会随着死亡代码的消失而摇动
UglifyJS
应该以使我能够从中编写命名导入的方式工作
index.es.js
例如,模块
Material-UI-Icons
未使用的从包中删除。
import {Menu} from 'material-ui-icons';
这个库确实重新导出了包中定义的ES6模块。json as
"module": "index.es.js"
.
然而,在导入单个图标后,我的包大小增加了0.5MB。当我把它改成
import Menu from 'material-ui-icons/Menu;
仅导入此图标后,捆绑包大小再次减小。
我的配置中是否有问题,或者我是否误解了树抖动的工作原理,并且不适用于此场景?