Webpack 包大小完全关闭

Question

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

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

import moment from 'moment';

因为我没有在任何地方使用 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 ... }

优先考虑“模块”而不是“主”，正确地进行treeshake。

Answer 2

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