Coder Social home page Coder Social logo

lodash-ts-imports-loader's Introduction

Jump to

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

License

[jump to TOC]
Released under the MIT license.

Copyright © 2016, Eduard Fidiles

lodash-ts-imports-loader's People

Contributors

efidiles avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.