比较初学者的脚本

我同时运行了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组件的开发，以及所述开发组件跨框架的可用性。

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

比较初学者的脚本

底线