制作 react 组件 npm 包，采取导出源文件(jsx 语法)和 bundle 文件各有什么优缺点？
vevlins · 2018-05-13 16:47:14 +08:00 · 2134 次点击这是一个创建于 2389 天前的主题，其中的信息可能已经有所发展或是发生改变。
现在老板要求通过 npm 包的形式实现组件化，因为组件会在两个项目内使用。
导出 jsx，跟整个项目一起过 webpack。
- 多人协作下依赖管理比较混乱
- 用一套 webpack，单个组件灵活性低
导出 bundle
- 体积会不会相比直接导出 jsx 更大呢，external react 之后一个 helloworld 级别的组件都 20k，这是 webpack 打包之后的正常水准吗？
 |
1
yyfearth 2018-05-13 17:24:00 +08:00  1
这里 webpack 坑比较多 我现在都是不用打包的组件 直接引用源代码 基本上就是你第一种方法
导出 bundle 其实也可以 但是你 external react 是不够的 要 external 所有的 依赖 除非你 100% 确定这个依赖是你这个组件独有的 external 所有依赖后 bundle 文件就比较小了 而且不用担心 因为整个项目的 webpack 会把依赖打包进去 否则同一个依赖 如果其他地方有用到 会被打包多次 造成文件非常大 另外如果项目的多个组件用了不同版本的依赖 多个版本会被打包起来 导致最终 bundle 非常大 最容易碰到的例子就是 lodash 和 moment 两个库 本身就挺大的 加上不同组件及其依赖使用了不同版本或者不同发布方式的版本 比如 lodash 有 cjs 版本 es 版本 模块化的 cjs 版本 模块独立的发布的 cjs 版本 而且每种还可能有不同的 version 我之前就遇到过一个项目里面 lodash 就 4-5 个不同的拷贝被打包 每个 10k - 90k 不等 然后是 moment 的 locale 需要在打包的时候排除 否则非常大 这个可以通过修改 webpack 的配置来统一版本 我接触过的一个项目 一开始每个组件自己 bundle 然后项目再 bundle 结果各种重复打包 一个简单的 webapp 可以到 10M 的 JS bundle 通过各种办法 在没有减少任何功能 组件 和 依赖的情况下 减少到 250K JS + 100K CSS + 80K 字体文件 |
|
2
yyfearth 2018-05-13 17:28:49 +08:00 1
另外 我之所以最后选择第一种方法的主要原因 是因为方便开发和 debug
因为在开发项目的时候 经常要对 npm 包里面的组件进行修改 和 debug 导出 bundle 虽然可以用 source map 来 debug 但是没办法直接修改代码 立即 debug 必须 修改组件代码 -> 打包发布 -> 主项目 npm i 新版本 -> debug -> 修改组件代码 -> ... 非常耗时和浪费精力 改用直接使用 jsx 源代码 然后 npm link 或者 yarn workspace 一切就和没有 npm 包组件化一样方便了 |
Select Language