[Web翻译]比较React和Web组件。第1部分:初学者

时间:2020-9-6 作者:admin

原文地址:matsu.fi/posts/compa…

原文作者:matsu.fi

发布时间:2020年7月31日

在使用Javascript时,我总是避开大框架。我曾经使用React工作,但在积累了更多的语言经验后,我开始更接近于vanilla的一切工作。

比较初学者的脚本

我同时运行了React和Lit Element的推荐启动程序,Lit Element是最常用的Web组件库之一。

对于React来说,开始包括262 mb的depndencies,仅仅是为了启动

npm create-react-app react-example
cd react-example
du -sh node_modules
>> 262M

在Lit Element中,我使用了OpenWC推荐的启动器。

npm init @open-wc
cd lit-element-example
du -sh node_modules
>> 161M

这只是多了一点价值100MB的代码,可以开始构建一些Web应用。

且不说依赖树的问题。Creat-React-App似乎没有利用package.json的devDependencies标签。所有的测试包都是作为正常的依赖包来包含的。

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
}

这在大多数情况下不会引起任何问题,但将明确只在开发中使用的deps列为devDependencies会受到欢迎。

大多数React的库的依赖性都很低,只包含2-6个deps左右。但我们再看一下create-react-app中包含的react-scripts,它包含的依赖关系高达53个! 这比其他包多了11倍的依赖关系。由于我们刚刚经历了Lodash的惨败,让每个人都撞到了自己的包,有这么多的依赖关系肯定会让这种情况再次发生的可能性更大。

如果我们看OpenWC这边的图片,启动器会问你想在你的启动器中包含哪些包,从打包到测试到打毛,再到演示。为了这个目的,我选择了一切,但没有选择demoing(storybook)。

我们正常的依赖关系看起来很好,只有2个库。

"dependencies": {
    "lit-html": "^1.0.0",
    "lit-element": "^2.0.1"
  }

而这里唯一的交叉依赖就是Lit-Element依赖于lit-html,其他的都没有。

除此之外,starter还包含了更多有用的包,比如用eslint做linting,用prettier做prettifying,用husky做pre-commit hooks。下面是整个devDependencies树或者说OpenWC启动器。

"devDependencies": {
    "eslint": "^6.1.0",
    "@open-wc/eslint-config": "^2.0.0",
    "prettier": "^2.0.4",
    "eslint-config-prettier": "^6.11.0",
    "husky": "^1.0.0",
    "lint-staged": "^10.0.0",
    "@open-wc/testing-karma": "^3.0.0",
    "deepmerge": "^3.2.0",
    "@open-wc/testing": "^2.0.0",
    "@open-wc/building-rollup": "^1.0.0",
    "rimraf": "^2.6.3",
    "rollup": "^2.3.4",
    "es-dev-server": "^1.5.0"
  },

最后我们可以检查这两个启动器最后的构建大小。

我在这两个干净的安装上运行npm run build,然后检查导出文件夹的大小。

对于React来说,我们的大小高达548K,其中包括整个文件夹和472K的js文件夹。

对于OpenWc,我们最终只有168K,包括整个build文件夹,workbox似乎从中拿走了大部分。如果我们不使用workbox,我们可以删除这些文件,这样我们的dist文件夹就只剩下40K了。

仅仅是一个入门级的包,就有相当大的大小差异。考虑到很多人使用这些启动包作为他们的基础,他们可能比他们想象的要臃肿得多。

底线

虽然create-react-app是一个很好的工具,但它比其他框架带来了更多的臃肿。虽然其中一些可能可以通过一些树状结构来消除,但很多项目并没有使用允许这样做的技术,而只是将整个捆绑包按原样发布。

有了OpenWC,开发者就可以开始使用一个更可定制的入门构建,并且少了很多不必要的臃肿的东西。一个成品构建的包大小可以比使用React时小近10倍。

在下一篇文章中,我们将讨论针对React和Web组件的开发,以及所述开发组件跨框架的可用性。


www.deepl.com翻译

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。