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 模式下包含此插件的測試。