How to tree shake Webpack vendor chunk file?

Viewed 73

I'm building a vue ui library (bundle format > esm),

It's working fine on my app except one problem: I was expecting that when I build my app, Webpack will grab from my ui library only components i'm using, not the whole library. But the opposite happened.

Webpack creates a vendor chunk containing the whole ui library, although im using only 1 component:

import { OneComponent } from 'my-lib';

NB: I'm using Webpack 4.46.0;

Webpack rules:

{
          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$/],
              },
            },
          ],
        }

I would be grateful if you can help me tree shake my vendor chunk.

0 Answers
Related