6

我在这里读到了这个 - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - 从库中导入所有东西不会允许摇晃树将其删除，即使它不是用过的。我不相信，这是真的吗？我认为摇树会识别出除了一对之外没有使用任何功能，然后删除这些功能。

有一种非常简单的方法可以通过检查您的导入来减少捆绑包的大小。从 3rd 方库执行方法或组件时，请确保只导入您需要的东西，而不是整个库本身。例如，如果您正在使用 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, '');
4

2 回答 2

18

使用当前版本的 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")})();

基于this Github issue，即使在上一个答案时也是如此。

于 2020-10-28T09:07:24.397 回答
-2

是的，它是真实的。这是通过对 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

于 2018-11-21T16:45:52.417 回答