Question

我正在练习使我的webpack包变小，然后使用webpack的包分析器，我看到一个非常沉重的包包含在两个不同的异步块中，即使它只使用了一次。在深入研究我的代码之后，我意识到这可能是由于以下情况造成的：

file1.js

response = """A
A    
A
B
B
A
A
"""
print(re.sub(r'(.*\n)(\1)+', r'\2', response))

file2.js

A
B
A

file3.js

import { foo } from 'ReallyHeavyPackage'

export function a(): string {
    console.log("called a()");
}

export function b(): string {
    return foo();
}

我假设由于file1全局导入了重包，而file2从file1导入了一个函数，因此即使不导入实际使用该包的函数，它也将重包作为依赖项获取。我希望（或更确切地说，希望）只有file3的块包含了严重的依赖关系，因为它是唯一被使用的地方。

我应该以某种特定方式处理这样的导入吗？也许我可以在webpack中做一个魔术配置来帮助解决这个问题，这是一种更好的结构化模块/功能的方法，或者只是一种更好的导入功能/模块/包的方法？

我正在使用webpack 4，并且正在使用ES2017

Answer 1

也许尝试动态导入？

import pyexiv2
image = path_to_image
imageMetadata = pyexiv2.ImageMetadata(image)
imageMetadata.read()
try:
    del imageMetadata['Exif.Image.Orientation']
    imageMetadata.write()
except:
    continue

https://webpack.js.org/guides/code-splitting/#dynamic-imports

Answer 2

我认为您正在寻找的是Webpack CommonChunksPlugin：https://webpack.js.org/plugins/commons-chunk-plugin/。该插件从不同的包中获取通用块（模块/库），并将它们放入自己的包中。

避免从进口商品中导入代码

2 个答案: