Question

我在这里读过这篇文章https://www.thedevelobear.com/post/5-things-to-improve-performance/-从库中导入所有内容将不允许摇晃将其删除，即使不使用它也是如此。我不相信这是真的吗？我认为摇晃树会确定除了几个功能之外，没有其他功能被使用，然后将其删除。

有一种非常简单的方法，只需检查您的导入即可减小捆绑包的大小。从第三方库执行方法或组件时，请确保仅导入所需的内容，而不导入整个库本身。例如，如果您使用lodash并且需要fill方法，则直接导入它，而不是在lodash对象上调用它：
// Instead of this

import _ from ‘lodash’

let array = [1, 2, 3];
_.fill(array, '');

// Do this

import { fill } from ‘lodash’

let array = [1, 2, 3];
fill(array, '');

Answer 1

是的，这是真的。这是通过对es模块上已命名的导入进行静态分析完成的。

该工具将静态分析您的导入，并仅从源中复制您已声明的内容。如果要在所有代码中运行该代码，请确定从该文件中调用的所有功能，然后回去，删除那些未使用的功能，这将很昂贵，而且会花费更多时间。

如果有：

import {a} from 'filea'

但是你有

export const a = 'a';
export const b = 'b';

捆绑器/工具可以转到您的文件，请参阅：

“哦，一个人刚从a进口了filea，让我拉一下它。”

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

https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77

https://medium.com/@zwegrzyniak/webpack-4-1-and-es-modules-esm-dd0bd7dca4da

Answer 2

使用Webpack的当前版本（5.3.0），这不是事实。带有以下文件：

// src/index.js
import * as a from './modules'

console.log(a.foo)
// Or: console.log(a.baz.foo)

// src/modules.js
export const foo = 'foo'
export const bar = 'bar'
export const baz = {
  foo: 'foo',
  bar: 'bar',
}

Webpack输出：

// dist/main.js
(()=>{"use strict";console.log("foo")})();

基于此Github issue，即使在上一次回答时也是如此。

Webpack导入*摇摇欲坠吗？

2 个答案: