javascriptwebpacktree-shaking

Why does webpack import dead javascript code?


My webpack config has DefinePlugin definition:

module.exports = env => {
    const PROD = env.production;
    const mode = env.mode || (PROD ? 'production' : 'development');

    const plugins = [
        new LicenseCheckerWebpackPlugin(...),
        new CleanWebpackPlugin(...),
        new webpack.BannerPlugin(...),
        new CopyWebpackPlugin(...),
        new MiniCssExtractPlugin(...),
        new webpack.ProvidePlugin(...),
        new webpack.DefinePlugin({
            DEBUG: JSON.stringify(!PROD),
        }),
        new webpack.NormalModuleReplacementPlugin(...),
        new VueLoaderPlugin(),
        new ESLintPlugin(...),
    ];

    return {
        mode,
        performance: {...},
        entry: {...},
        output: {...},
        optimization: {
            minimize: mode === 'production',
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        compress: {
                            drop_console: true,
                        },
                        output: {
                            ascii_only: true,
                        },
                    },
                }),
                new CssMinimizerPlugin(),
            ],
        },
        stats: 'minimal',
        watchOptions: { aggregateTimeout: 200 },
        devtool: mode === 'production' ? false : 'inline-source-map',
        resolve: {...},
        module: {
            rules: [...],
        },
        plugins,
    };
};

JS code:

import { MyDebugModule } from './my-debug-module';

if (DEBUG) {
    MyDebugModule();
}

There is no a call of MyDebugModule() in the final bundle, but webpack imports the code from my-debug-module.js when DEBUG is false. If I completely remove the code if (DEBUG) { MyDebugModule(); } webpack removes the my-debug-module code.

webpack@5.88.2

sideEffects does not affect to the imported module. Upd. Actually, it was wrong in my case.


Solution

  • sideEffects affected to the imported module - that's why webpack leaves it in the code. It has an expression that matches with my-debug-module.js