ts-loader concatenates all dependencies instead of only needed ones

[akopchinskiy]

ts-loader concatenates all dependencies instead of only needed ones.

Example:

main.ts

import { test } from "./module";

console.log(test);

module.ts

import {Injectable} from '@angular/core';

@Injectable()
export class MyService { 
    ngOnInit(){}
}

export const test = 1;

Webpack config

{
        entry: `./src/test/main.ts`,

        output: {
            path: path.resolve(__dirname, `./test/`),
            filename: 'test.bundle.js'
        },

        module: {
            rules: [
                {
                    test: /\.ts?$/,
                    use: [
                        {
                            loader: 'thread-loader'
                        },
                        {
                            loader: 'ts-loader',
                            options: {
                                happyPackMode: true
                            }
                        }
                    ]
                }
            ]
        },

        resolve: {
            extensions: [
                '.ts',
                '.tsx',
                '.js'
            ],
            plugins: [
                new TsconfigPathsPlugin({
                    configFile: `./src/test/tsconfig.json`
                })
            ]
        },

        optimization:{
            providedExports: true,
            usedExports: true
        },

        plugins: [
            new BundleAnalyzerPlugin({
                analyzerPort: 8891
            })
        ],

        watch: true
     }

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "moduleResolution": "node",
        "allowJs": true,
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noEmit": true,
        "baseUrl": "./",
        "declaration": true,
        "removeComments": true,
        "alwaysStrict": true,
        "rootDir": "/src/test",
        "sourceRoot": "/src/test",
        "types": [
            "node",
            "chrome"
        ],
        "typeRoots": [
            "/node_modules/@types"
        ],
        "lib": [
            "es5",
            "es6",
            "es2015",
            "es2016",
            "es2017",
            "esnext",
            "dom",
            "dom.iterable"
        ],
        "outDir": "dist",
    },
    "files": [
        "./test.ts"
    ],
    
    "exclude": [
        "/node_modules"
    ]
}

Expected Behaviour

Imports only const test . Small bundle size.

Actual Behaviour

It imports everything from imports list in module.ts. Huge bundle size.

BundleAnalyzerPlugin output

[johnnyreilly]

I'm assuming it's tree shaking you're after? That's more webpack specific than ts-loader specific. I'm not aware of any issues around ts-loader in what you've said. See #453

You may need to pipe to babel

[akopchinskiy]

@johnnyreilly I don't need babel, because I need TS to be compiled to pure ES6 code without support of old browsers.

[johnnyreilly]

You can do that with Babel! You choose how far back you want to transpile

[akopchinskiy]

@johnnyreilly I understand, but doesn't ts-loader already transpiling my code? And if tree-shaking is a webpack feature, then how's babel even related to all this?

[johnnyreilly]

It does - but you can target the version of ecmascript you choose and let Babel do it's thing.

I'm no expert on tree shaking I'm afraid; you'll have to ask elsewhere..

[akopchinskiy]

@johnnyreilly Okay, i'll try to use it in the way you suggest. Thank you.

[Bellian]

Had some problems too. You are using the wrong module system. Use "module": "es2015" in order to use tree shaking.

From Webpack documentation:

So, what we've learned is that in order to take advantage of tree shaking, you must...

• Use ES2015 module syntax (i.e. import and export).
  Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of popular Babel preset @babel/preset-env - see documentation for more details).
• Add a "sideEffects" property to your project's package.json file.
  Use production mode configuration option to enable various optimizations including minification and tree shaking.

[akopchinskiy]

@Bellian It seems like the webpack docs was updated after the issue itself was created :)