Webpack Tree-Shaking 动态导入似乎不起作用

Question

历史： 我最近发现使用 Webpack 和动态导入有一个奇怪的行为。首先我认为它可能是我使用的第 3 方库 'Loadable Components'，所以我在他们的末端打开了一个错误问题 (https://github.com/gregberge/loadable-components/issues/517)。作者回复告诉我行为来自 Webpack 和动态导入本身。

我可以忍受它不会对动态导入进行 tree-shaking 的事实，对我来说更重要的是理解为什么会这样。

演示存储库 可在此处找到演示行为的方法：https://github.com/dazlious/treeshaking-dynamic-imports

问题的简短描述：从我的角度来看，导入的命名导出不应强制将所有导出的代码捆绑在其中。

在演示案例中，我们有一个组件 (./lib/index.jsx)，它有两个子组件，分别称为模块 1 (./lib/module1/module1.jsx) 和模块 2 (./lib/module1/module2. jsx). Module1 导出一个名为 FOO_BAR 的常量，然后由 Module2 作为命名导入导入。

查看构建输出时，您会发现 Module2 包含整个 Module1，而不仅仅是专门导入的字符串。

这里有人对 Webpack and/or 动态导入有深入了解吗？很乐意了解有关该行为的更多信息。

Answer 1

我将 webpack.config 编辑为：

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const baseDir = path.resolve(__dirname);

const config = {
  mode: process.env.NODE_ENV,
  stats: 'minimal',
  resolve: {
    extensions: ['.js', '.jsx'],
    symlinks: false,
  },
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'analyze.html',
    }),
  ],
  target: 'web',
  devtool: 'hidden-source-map',
  entry: {
    bundle: [path.resolve(baseDir, 'lib')],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
    mangleWasmImports: true,
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false,
        vendor: {
          name: 'vendor',
          chunks: 'all',
          test: /node_modules/,
          priority: 20
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          priority: 10,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    },
  },
  output: {
    chunkFilename: '[name].[chunkhash].js',
    publicPath: '/',
    path: path.join(baseDir, 'dist'),
    filename: '[name].[hash].js',
  },
  module: {
    rules: [
      {
        test: /^.*\.jsx?$/,
        include: [path.resolve(baseDir, 'lib')],
        loader: 'babel-loader?cacheDirectory',
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
    ],
  },
};

module.exports = config;

我想这就是您要找的结果吧？ image of bunde analyzer showing modules in their own bundles

我认为它需要 splitChunks 选项才能真正正确地对组件进行 tree-shaking。我花了很多时间试图弄清楚 webpack，但我仍然在这里猜测。

Webpack Tree-Shaking 动态导入似乎不起作用

Webpack Tree-Shaking Dynamic Imports seems not to be working

javascript

import

ecmascript-6

webpack

tree-shaking