为什么ag网格代码出现在我的stenciljs组件包?

Question

我正在尝试优化一个使用ag-grid作为第三方依赖的StencilJS组件。目前，rollup正在将ag-grid定义添加到我的代码包中，导致包大小约为1Mb(已存档)。

是否有一种方法可以在我的bundle中实现代码分离?还是我看问题的角度不对?

该组件与其他使用ag-grid的第三方web组件一起在vue应用中使用。在这个场景中，网格代码将被复制。组件库非常简单，只有2个组件:

$ ls -l src/components/product-picker/
total 30
-rw-r--r-- 1 197121  1692 Aug  8 10:35 readme.md
-rw-r--r-- 1 197121    41 Jul  9 13:38 product-filter.scss
-rw-r--r-- 1 197121  6521 Jul 19 09:34 product-filter.tsx
-rw-r--r-- 1 197121   371 Jun 25 11:51 product-picker.scss
-rw-r--r-- 1 197121 10089 Aug  8 10:21 product-picker.tsx
-rw-r--r-- 1 197121  1630 Jul 15 17:00 product-picker-grid.scss
drwxr-xr-x 1 197121     0 Jun 25 11:51 test/

这是我在tsx组件中导入ag-grid的方法

import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { Grid, GridOptions } from '@ag-grid-community/core';
[...]
ModuleRegistry.registerModules([
ClientSideRowModelModule,
]);
@Component({
tag: 'product-picker',
styleUrl: 'product-picker.scss',
})

构建文件是这样的:

$ ls -lh dist/esm/
total 2.2M
-rw-r--r-- 1 197121    1 Aug  8 10:35 index.js
-rw-r--r-- 1 197121  41K Aug  8 10:35 index-0f6f2d39.js
-rw-r--r-- 1 197121  931 Aug  8 10:35 loader.js
drwxr-xr-x 1 197121    0 Aug  8 10:35 polyfills/
-rw-r--r-- 1 197121 2.2M Aug  8 10:35 product-filter_2.entry.js
-rw-r--r-- 1 197121  947 Aug  8 10:35 product-picker.js

product-filter_2.entry.js文件包含与ag-grid相关的所有代码行。

Answer 1

选项1

你可以尝试使用Typescript 3.8的type only imports:

这样，您就获得了TS的类型安全性，而无需在您的Stencil包中包含所有ag-grid。这假设页面上的其他组件确实以某种方式包含ag-grid，使您的Stencil组件可以访问它

选项2

如果你正在使用webpack，你可以考虑将ag-grid标记为external库，而不是包含在生成的包中。

还有一个类似的问题，不要将React运行时与每个组件捆绑在一起，而是在页面上添加一次脚本标签，以减少捆绑大小。

https://github.com/webpack/webpack/issues/1275 issuecomment - 123846260

{
...
externals: {
// Use external version of React
"react": "React"
},
...
}

选项3

您可以不将ag-grid作为依赖项添加到您的Stencil项目中，而是依赖于window.agGrid或类似的存在。就我个人而言，我不喜欢这个选项，因为在这一点上，您在Stencil项目中没有类型安全。