Webpack 包大小完全关闭

Question

I have the chance to work on a project which was using Webpack 2 and Babel 6. After a few hours, I successfully upgraded our build to Webpack 4 and Babel 8. That being said, we used to have two files vendor.js (228kb) and app.js (209kb) and now we have one large file which is 2.3Mb. The size of these files are in Chrome (gzipped).

On my local, the last file is 13.4 Mb with development mode. 12.2 Mb with production mode. If I add "moment" library to the project with the following code and production mode on, it went to 13.9 Mb:

import moment from 'moment';

Since I'm not using moment anywhere, I was expecting Webpack to not bundle it; looks three shaking isn't working/properly set up?

Please find below some useful information about my project and let me know what you think.

.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,
};

package.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

resolve: { mainFields: ['browser', 'module', 'browserify', 'main'], alias... }

Give priority to "module" over "main", to treeshake properly.

Answer 2

The issue was the HotModuleReplacementPlugin which was bundled in the build file and adding 10Mb. When I refactored the code, I omitted a test which only incorporate this plugin on DEV mode.