efidiles / lodash-ts-imports-loader

Transpiles ES6 lodash imports into typescript imports to help with tree-shaking

Jump to

• Overview
• Usage
• Installation
• Links
• License

Overview

[jump to TOC]

A webpack preloader which transpiles ES6 lodash imports into typescript imports to help with tree-shaking.

Basically transpiles from ES6 syntax:

import { debounce } from 'lodash';

into typescript syntax:

import debounce = require('lodash/debounce');

before the source code is being taken through the typescript compiler.

This way webpack 2 will be able to only include the code that's being actually used.

Installation

[jump to TOC]

1. Install the package:

$ npm install lodash-ts-imports-loader --save-dev

Usage

[jump to TOC]

In your webpack.config.js add the lodash-ts-imports-loader preloader:

// ...
module: {
    rules: [
        {
            test: /\.ts$/,
            loader: 'lodash-ts-imports-loader',
            exclude: /node_modules/,
            enforce: "pre"
        },
        // ...
    ],
    // ...
}
// ...

Now somewhere in your main.ts typescript file add an ES6 import for lodash:

import { debounce } from 'lodash';
// make sure you have this line as well otherwise you're not using the import member
// and the lodash code will not be included in the bundle
console.log(debounce); 

run webpack bundling and check your bundle size.

Update the code to:

import { debounce, zip } from 'lodash';
// make sure you have this lines as well otherwise you're not using the import members
// and the lodash code will not be included in the bundle
console.log(debounce); 
console.log(zip); 

run webpack bundling and check your bundle size.
This time the bundle size should be larger.

Links

[jump to TOC]

NPM:
https://www.npmjs.com/package/lodash-ts-imports-loader
GITHUB:
https://github.com/efidiles/lodash-ts-imports-loader.git

Author

[jump to TOC]

Eduard Fidiles

• github/efidiles
• twitter/efidiles

License

[jump to TOC]
Released under the MIT license.

Copyright © 2016, Eduard Fidiles

lodash-ts-imports-loader's Issues

Third party modules?

Hi,

Many thanks for writing this tool!

I'm wondering if there's a way I can get this to work with third party modules.
Specifically, I'm using Semantic-ui-react, which bundles lodash. It documents (scroll to the bottom) their troubles with webpack tree shaking, but as a Typescript non-babel user I haven't found their workarounds helpful.

I've tried fiddling with your recommended config to make it apply down node_modules but haven't had much luck - bringing a single semantic-ui-react component in seems to bundle the whole of lodash.

Have you had any experience of luck using this loader modules that themselves bundle lodash?