Webpack Tree-Shaking Dynami c Импорт, похоже, не работает - PullRequest
Новая
       35

Webpack Tree-Shaking Dynami c Импорт, похоже, не работает

0 голосов
/ 03 февраля 2020

История: Недавно я обнаружил странное поведение при использовании Webpack и динамического импорта c. Сначала я подумал, что это может быть сторонняя библиотека «Загружаемые компоненты», которую я использовал, поэтому я открыл ошибку (https://github.com/gregberge/loadable-components/issues/517) на их конце. Автор ответил, что поведение исходит от Webpack, и динамический c импортирует сам себя.

Я могу смириться с тем фактом, что он не потрясает импорт динамического c, для меня это более важно понять, почему это так.

Демонстрационный репозиторий для демонстрации поведения можно найти здесь: https://github.com/dazlious/treeshaking-dynamic-imports

Краткое описание проблемы: с моей точки зрения, импортированный именованный экспорт не должен принудительно связывать весь экспортируемый код внутри него.

В демонстрационном случае у нас есть компонент (./lib/ index.jsx), который имеет два подкомпонента, называемые module1 (./lib/module1/module1.jsx) и module2 (./lib/module1/module2.jsx). Module1 экспортирует константу с именем FOO_BAR, которая затем импортируется Module2 в качестве именованного импорта.

При просмотре вывода сборки вы обнаружите Module2, содержащий Module1 в целом, а не только строку, которая специально импортирована.

Кто-нибудь с глубоким знанием Webpack и / или динамического c импорта здесь? Будем рады узнать больше о поведении.

1 Ответ

1 голос
/ 03 февраля 2020

Я отредактировал файл 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;

Я думаю, что это результат, который вы ищете? изображение Bunde Analyzer, показывающее модули в их собственных пакетах

Я думаю, что для правильного расшатывания компонентов дерева требуется опция splitChunks. Я потратил много времени, пытаясь разобраться в веб-пакете, но я все еще догадываюсь здесь.

...