时间戳

首页 > 解决方案 > 显式导入与 * 登录 javascript

javascript - 显式导入与 * 登录 javascript

问题描述

这样做有什么意义

import * as copy from 'copy-to-clipboard';

相对

import { someMethod } from 'copy-to-clipboard';

它会影响性能或捆绑包大小吗？我更喜欢第二个，它看起来更干净。

标签： javascriptreactjsvue.jsnpm

解决方案

使用第二种形式允许像 Webpack 这样的打包工具使用称为“摇树”的过程来优化你的包大小。

Tree Shaking 是 JavaScript 上下文中常用的一个术语，用于消除死代码。它依赖于 ES2015 模块语法的静态结构，即导入和导出。名称和概念已被 ES2015 模块捆绑器汇总推广。

取自https://webpack.js.org/guides/tree-shaking/

假设您有一个这样的库模块：

// my-module.js

export const foo = function () { ... };
export const bar = function () { ... };
export const baz = function () { ... };

然后，如果您按如下方式使用foo()in file.js，Webpack 将识别出您不需要bar()并且baz()不会在捆绑包中发出它们，从而减少通过网络发送的字节数，从而可以加快网站的加载速度。

import { foo } from 'my-module';

foo();

推荐阅读