CODEWITHSUNDEEP
javascriptecmascript-6babeljs
ThrowsException
ThrowsException

Reputation: 2636

how to know which imports and modules are available

I'm trying to reduce the size of my application by cutting down on some imports and one of the things I've learned is that doing things like import {foo, bar, foobar} from library can create a much larger final bundle and instead it is better to do

import foo from library/foo
import bar from library/bar
// etc

My question is how do I know which individual modules are available? is it standard that if this works

import React, {PropTypes} from 'react'

that something like this should also work as well ?

import React from 'react'
import PropTypes from 'react/proptypes'

How do you know which modules and exports are available in a project in order to target just ones that you want to avoid doing import * from module

Upvotes: 3

Views: 770

Answers (2)

LetterEh
LetterEh

Reputation: 26696

Open the npm_modules folder, and check to see if it either has <module-name>/<import-name>.js or <module-name>/<import-name>/index.js.
If it has one or the other, you can import them.

Webpack 2.0, however, will prefer that you use ES6 syntax.

import { foo } from "bar";

It will then tree-shake any code from the library that hasn't been statically imported (or referenced by the static code) in such a way.

Upvotes: 1

basarat
basarat

Reputation: 275849

That something like this should also work as well ?

No. It is up to the module creator. You are most likely using a node_module for react and the fact that react/proptypes is available points to the fact that there is a file node_modules/react/proptypes.js in the package.

This means its entirely up to the module author.

Upvotes: 2

Related Questions