Как проверить что tree shaking работает? И как заставить его работать нормально?

Question

[JeanPaulBelmondo]

Использую webpack.

у меня есть 7 простых функций

spoiler

export default function test1() {
    return 'test1'
}

и тд

index.ts

export { default as test1 } from './lib/test1';
export { default as test2 } from './lib/test2';
export { default as test3 } from './lib/test3';
export { default as test4 } from './lib/test4';
export { default as test5 } from './lib/test5';
export { default as test6 } from './lib/test6';
export { default as test7 } from './lib/test7';

package json

{
    "name": "test-package",
    "version": "1.0.1",
    "description": "Test",
    "sideEffects": false,
    "main": "./dist/index.js",
    "scripts": {
        "build": "webpack",
        "watch": "webpack --watch",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Blabla Balbalbab",
    "license": "ISC",
    "bugs": {
        "url": "https://github.com/***/***/issues"
    },
    "homepage": "https://github.com/***/****#readme",
    "devDependencies": {
        "@types/lodash": "^4.14.189",
        "@types/luxon": "^3.1.0",
        "@types/react": "^17.0.52",
        "process": "^0.11.10",
        "ts-loader": "^9.4.1",
        "typescript": "^4.9.3",
        "webpack": "^5.75.0",
        "webpack-cli": "^4.10.0"
    },
    "peerDependencies": {
        "react": "*"
    },
    "files": [
        "dist"
    ],
    "dependencies": {
        "@shopify/app-bridge": "^2.3.0",
        "@shopify/app-bridge-utils": "^2.3.0",
        "@shopify/react-form": "^2.4.1",
        "assert": "^2.0.0",
        "axios": "^0.27.2",
        "buffer": "^6.0.3",
        "classnames": "^2.3.2",
        "lodash": "^4.17.21",
        "luxon": "^3.1.0",
        "react": "*"
    }
}

webpack config

const path = require('path');

module.exports = {
    mode: 'production',
    entry: {
        index: './src/index.ts',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: 'umd',
        umdNamedDefine: true,
        globalObject: `(typeof self !== 'undefined' ? self : this)`,
        clean: true
    },
    performance: {
        hints: false
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    externals: {
        react: 'react'
    },
    module: {
        rules: [{
                test: /\.(ts|tsx)?$/,
                use: ['ts-loader'],
                exclude: /node_modules/
            },
        ]
    }
}

Но каждый раз при экспорте функции test1 или test2 у меня загружаются все остальные функции тоже ( я смотрю через расширение import cost для vs code )
Что не так и как можно это исправить?

Comments

[Антон Горецкий]

нужно еще в конфиг вебпака добавить:

module: {
  optimization: {
    sideEffects: false,
  },
},

[JeanPaulBelmondo]

Антон Горецкий, попробовал, ничего не изменилось

[Антон Горецкий]

По идее - все условия выполнены. Остается только правильно использовать в коде через es6 import

[its2easyy]

вы уверены что import cost выполняет внутри себя tree shaking чтобы указать итоговый размер? Лучше уже через https://github.com/webpack-contrib/webpack-bundle-... смотреть в проекте который импортирует эти функции и для prod билда. Можно потом убрать sideEffects в package.json и посмотреть увеличиться ли размер, если увеличиться значит tree shaking работал

[its2easyy]

вообще umd не должен подходить потому что tree shaking только с esm должен работать, ссылка ссылка. Поэтому если umd всё таки нужен, то нужно два билда делать, и один из них должен быть esm, и этот файл указывать в package.json в поле module. Но вебпак как минимум раньше нормально не умел экспортировать es модули, поэтому дополнительно использовали другие сборщики типа rollup