Как создать файл фрагмента поставщика Webpack для встряхивания дерева?

#webpack #bundling-and-minification #tree-shaking

Вопрос:

Я создаю библиотеку пользовательского интерфейса vue (формат пакета > esm),

Это нормально работает в моем приложении, за исключением одной проблемы: я ожидал, что при создании своего приложения Webpack будет извлекать из моей библиотеки пользовательского интерфейса только компоненты, которые я использую, а не всю библиотеку. Но произошло обратное.

Webpack создает блок поставщика, содержащий всю библиотеку пользовательского интерфейса, хотя я использую только 1 компонент:

 import { OneComponent } from 'my-lib';
 

NB: Я использую Webpack 4.46.0 ;

Правила веб-пакета:

 {
          test: /.vue$/,
          loader: 'vue-loader',
        },
        {
          test: /.tsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                comments: true,
                presets: ['@babel/preset-env'],
                plugins: ['transform-vue-jsx'],
              },
            },
            {
              loader: 'ts-loader',
              options: {
                appendTsSuffixTo: [/.vue$/],
              },
            },
          ],
        }
 

Я был бы признателен, если бы вы помогли мне встряхнуть дерево моего поставщика.