Is using an ES6 import to load specific names faster than importing a namespace?

by

TL;DR: It does not matter.

import * as … from 'ramda';
import { … } from 'ramda';

will both by default always bring in the complete Ramda module with all its dependencies. All code inside the module would be run, and which syntax was used to reference the exported bindings doesn’t matter. Whether you use named or namespaced imports comes down to preference entirely.

What can reduce the file size to download and the used memory is static analysis. After having evaluated the module, the engine can garbage-collect those bindings that are referenced from nowhere. Module namespace objects might make this slightly harder, as anyone with access to the object can access all exports. But still those objects are specified in a way (as immutable) to allow static analysis on their usage and if the only thing you’re doing with them is property access with constant names, engines are expected to utilise this fact.

Any size optimisation involves guessing which parts of the module need to be evaluated and which not, and happens in your module bundler (like Rollup or WebPack). This is known as Tree Shaking, dropping parts of the code and entire dependencies when not needed (used by anything that got imported). It should be able to detect which imports you are using regardless of the import style, although it might have to bail out when are doing unusual things with the namespace object (like looping it or using dynamic property access).

To learn about the exact guesses your bundler can make, contact its documentation.

More Related Contents:

  1. Is it possible to import modules from all files in a directory, using a wildcard?
  2. Pass options to ES6 module imports
  3. `export const` vs. `export default` in ES6
  4. Node.js plans to support import/export ES6 (ECMAScript 2015) modules
  5. using brackets with javascript import syntax
  6. ES6 Modules: Undefined onclick function after import
  7. ES2015 import doesn’t work (even at top-level) in Firefox
  8. Which browsers support import and export syntax for ECMAScript 6?
  9. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  10. ES6: import module from URL
  11. ES6 Destructuring and Module imports
  12. Javascript ES6 export const vs export let
  13. ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”
  14. How can I alias a default import in JavaScript?
  15. Are ES6 module imports hoisted?
  16. Not recommended to use “use strict” in ES6?
  17. Inlining ECMAScript Modules in HTML
  18. What is the defined execution order of ES6 imports?
  19. What is the difference between importing a function expression or a function declaration from a ES6 module?
  20. How will browsers handle ES6 import/export syntax
  21. ES2015 “import” not working in node v6.0.0 with with –harmony_modules option
  22. Re-export default in ES 6 modules
  23. Output an ES module using webpack
  24. How does JavaScript import find the module without an extension?
  25. What is destructuring assignment and its uses?
  26. Arrow function without curly braces
  27. ES6 class variable alternatives
  28. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  29. How do I destructure all properties into the current scope/closure in ES2015?
  30. Wrap long template literal line to multiline without creating a new line in the string

Leave a Comment