Jump to
Overview
Transforms lodash function imports into sub-modules imports, which allows for a tree-shaking.
It transforms from:
;
to:
;
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
- Install the package:
$ npm install lodash-ts-webpack-plugin --save-dev
Usage
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:
;// 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 bundleconsole;
run webpack bundling and check your bundle size.
Update the code to:
;// 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 bundleconsole; console;
run webpack bundling and check your bundle size.
This time the bundle size should be larger.
Links
NPM:
https://www.npmjs.com/package/lodash-ts-webpack-plugin
GITHUB:
https://github.com/impankratov/lodash-ts-webpack-plugin.git
Authors
Eduard Fidiles
Ivan Pankratov
License
[jump to TOC]
Released under the MIT license.
Copyright © 2017, Eduard Fidiles, Ivan Pankratov