我有一个组件库发布到npm，并安装在其他项目中。
该库不使用动态导入。组件在库中导出如下：
import {Component1} from '@/modules/component1';import {Component2} from '@/modules/component2';import {Component3} from '@/modules/component3';export {Component1,Component2,Component3,};
字符串
这些组件的进口方式如下：
import {Component1, Component2} from 'myLibrary';
型
在构建组件库时，没有任何代码拆分，它可以正常工作，但整个库都被导入并影响页面的大小。
当使用webpack的splitChunks时，库的主入口点不会导出组件，导出显示为undefined。
据我所知，splitChunks在与HtmlWebpackPlugin一起使用为所有块添加脚本标记的情况下工作得最好。这在我的情况下不起作用，因为我将其构建为库。
另外，我尝试将每个组件单独构建为入口点，但文件仍然太大。当我使用splitChunks时，文件大小非常方便，但组件无法导出。
我应该如何实现这一点？我想将库拆分为多个文件，但仍然能够在代码中导入它并访问所有导出的组件。
- 注意事项：这样做的主要目的是减少文件大小，这是捆绑到一个浏览器扩展，所以网络性能并不重要，因为文件是离线可用的。*
1条答案
按热度按时间jk9hmnmh1#
在没有看到你的库和你如何捆绑它的情况下，很难给予更具体的建议。但是通常，你不想在库本身上做太多的捆绑和延迟加载。理想情况下，它应该只是树抖动。这意味着更简单。（在你的情况下，webpack）将只包含你在应用程序中使用的库的部分。所以如果你在应用程序中只导入
Component2，webpack将只包含Component2本身和它工作所需的部分（但不是Component1或Component3）。为了让你的库支持这一点，你需要做一些额外的工作。Webpack有关于树摇动的guide，这将是一个很好的起点。我还建议阅读关于ESM vs CommonJS的文章。（例如this article），并确保webpack将您的库编译为单独的ESM文件。后来在应用程序中，（在您的情况下是浏览器扩展）您可以优化代码分割。这可以用于预定义的代码块。例如，您可以将代码拆分为预定义的
ui.js（所有ui相关代码，如组件）和libs.js（所有其他使用的库）块，然后只加载您需要的块（例如，ui.js在后台工作程序中不需要，所以不需要加载它）。我在浏览器扩展模板中使用这种方法有一段时间了，你可以在这里找到例子。或者，通过稍微调整webpack配置，您可以使
import()函数在扩展上下文中工作。在这种情况下，webpack将自动优化块，以便每个入口点（popup / contentscript / background worker）将加载最少量的不必要代码。（尽管它可能在旧的浏览器中不起作用）。你可以找到示例配置here或检查这个plugin。作为额外的奖励，你将能够在代码中使用动态导入，这允许你延迟加载扩展的部分（尽管这需要调整你的应用程序一点），这也将减少初始包的大小。