考虑到这个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';
这个库确实会重新导出 package.json 中定义的 ES6 模块作为 "module": "index.es.js"
。
然而,导入单个图标后,我的捆绑包大小增加了 0.5MB。当我把它改成
import Menu from 'material-ui-icons/Menu;
捆绑包大小再次减小,仅导入此图标。
我的配置中是否有问题,或者我错过了对树摇动的工作原理并且不适用于这种情况?
所以经过一些额外的挖掘,我找到了原因/临时解决方案/解决方案。基本上,由于ES Modules
可能会产生副作用,因此Webpack
也不能UglifyJS
安全地(根据规范(删除通常在index.es.js
或类似"module"
入口点中找到的未使用的再导出。
目前,有一些方法可以解决它。你可以只手动导入必要的模块,也可以使用 babel-plugin-direct-import。
好消息是Webpack 4
通过side-effects
标志添加了对纯模块的支持。当库作者将其标记为纯净时,树摇晃和缩小将按预期工作。我还建议阅读这个关于 NodeJS 中 ESM 规范支持的精彩摘要。
现在,我建议使用这个出色的可视化工具手动处理您的捆绑包,并决定如何自行处理每个大型依赖项。