Webpack bundle大小完全关闭

Question

我有机会参与一个使用 Webpack 2 和 Babel 6 的项目。几个小时后，我成功地将我们的构建升级到 Webpack 4 和 Babel 8。话虽如此，我们曾经有两个文件供应商.js(228kb(和app.js(209kb(，现在我们有一个2.3Mb的大文件。这些文件的大小在Chrome(gzipped(中。

在我的本地，最后一个文件是 13.4 Mb 使用开发模式。 12.2 Mb 生产模式。如果我使用以下代码和生产模式将"moment"库添加到项目中，它将变为 13.9 Mb：

import moment from 'moment';

由于我没有在任何地方使用时刻，我希望 Webpack 不会捆绑它; 看起来三个摇晃不起作用/设置正确？

请在下面找到一些关于我的项目的有用信息，并让我知道你的想法。

.babelrc

{
"presets": ["@babel/preset-react", ["@babel/preset-env", { "modules": false }]],
"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }], "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from", "react-hot-loader/babel", "@babel/plugin-transform-react-constant-elements"]
}

.webpack.config.js

const config = {
optimization: {
usedExports: true,
},
entry: {
app: './src/scripts/index.js',
},
output: {
chunkFilename: '[id].[hash].js',
path: path.join(__dirname, 'dist'),
filename: 'content/dam/pom/js/app.js',
},
resolve: {
alias: {
bodymovin: path.join(__dirname, 'vendor/bodymovin.min.js'),
modernizr$: path.resolve(__dirname, '.modernizrrc'),
},
},
module: {
rules: [
{
test: /.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /.js$/,
use: ['babel-loader'],
exclude: /(dist|prerender|node_modules|vendor)/,
},
{
test: /.(gif|png|jpg|woff|woff2|eot|svg|ttf|json)$/,
use: 'file-loader',
exclude: /(node_modules|vendor)/,
},
],
},
plugins: plugins,
};

包.json

"scripts": {
"dev": "npm run clean && npm run copy-assets && npm run copy-vendor-scripts && NODE_ENV=production webpack -p --progress",
"copy-assets": "rsync -a --exclude='.*' ./src/404.html ./src/content ./src/favicon.ico ./dist",
"copy-vendor-scripts": "rsync -a ./vendor ./dist",
},

Answer 1

解析：{mainFields： ['browser'， 'module'， 'browserify'， 'main']， alias... }

优先考虑"模块"而不是"主"，以正确摇树。

Answer 2

问题是HotModuleReplacementPlugin捆绑在构建文件中并添加了10Mb。当我重构代码时，我省略了一个测试，该测试仅在 DEV 模式下包含此插件。