Skip to content
Transforms lodash function imports into sub-modules imports, which allows for a tree-shaking
Branch: master
Clone or download
Pull request Compare This branch is 8 commits ahead, 6 commits behind efidiles:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
LICENSE
README.md
index.js
index.spec.js
package-lock.json
package.json

README.md

Jump to

Overview

[jump to TOC]

Transforms lodash function imports into sub-modules imports, which allows for a tree-shaking.

It transforms from:

import { debounce } from 'lodash';

to:

import debounce from '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-webpack-plugin --save-dev

Usage

[jump to TOC]

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

// ...
module: {
    rules: [
        {
            test: /\.ts$/,
            loader: 'lodash-ts-webpack-plugin',
            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-webpack-plugin
GITHUB:
https://github.com/impankratov/lodash-ts-webpack-plugin.git

Authors

[jump to TOC]

Eduard Fidiles

Ivan Pankratov

License

[jump to TOC]
Released under the MIT license.

Copyright © 2017, Eduard Fidiles, Ivan Pankratov

You can’t perform that action at this time.