Webpack导入 * 会导致树摇晃？

ddhy6vgd 于 2023-10-19 发布在 Webpack

关注(0)|答案(2)|浏览(126)

我在这里读到-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, '🐻');

webpack

来源：https://stackoverflow.com/questions/53415558/webpack-import-messes-tree-shaking

2条答案

按热度按时间

zwghvu4y1#

使用当前版本的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，即使在上一个答案的时候也不是真的。

赞(0）回复(0）举报 2023-10-19

h43kikqp2#

是真的。这是通过对es模块上的命名导入进行静态分析来完成的。
该工具将静态分析您的导入，并从源代码中复制您声明的导入。如果它要在你所有的代码中运行，识别你从那个文件中调用的所有函数，返回，删除那些没有使用的函数，这将是昂贵的，并且会花费更多的时间。
如果您有：
import {a} from 'filea'
但你必须

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

bundler/tool可以转到您的文件，请参阅：
“哦，一个只从filea导入了a，让我把它拉出来。”
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

赞(0）回复(0）举报 2023-10-19

我来回答

Webpack导入 * 会导致树摇晃？

2条答案

相关问题

热门标签

最新问答