抛开 Vue、React、JQuery 这类第三方js，我们该怎么写代码？

第三方js的现状

无论是新入行的小白还是有经验的程序员，前端圈里的人一定听过这类第三方js的大名。一方面是因为它们实在太火了：

• 各种文章对框架进行对比、源码解析以。

• GitHub 上 star 数量高速增长。

• 各种针对框架的培训课程层出不穷。

• ……

另一方面是因为用它们开发非常方便：

• 利用脚手架工具几行命令就可以快速搭建项目。

• 减少大量的重复代码，结构更加清晰，可读性强。

• 有丰富的UI库和插件库。

• ……

但是一则 GitHub 放弃使用 JQuery 的消息让我开始思考：

第三方js除了带来便利之外还有哪些副作用？抛弃第三方js我们还能写出高效的代码吗？

第三方js的副作用

雪球滚起来

如果现在让你开发一个项目，你会怎么做？假设你熟悉的是React，那么用可以用create-react-app快速搭建一个项目。

• 很好，react、react-dom、react-router-dom 已经写入了package.json，不过事情还没完。

• http请求怎么处理呢？引入axios吧。

• 日期怎么处理？引入 moment 或 day 吧。

• ……

要知道，这种“拿来主义”是会“上瘾”的，所以第三方依赖就像一个滚动的雪球，随着开发不断增加，后所占体积越来越大。如果用 webpack-bundle-analyzer 工具来分析项目的话，会发现项目代码大部分体积都在node_modules目录中，也就意味着都是第三方js，典型的二八定律（80%的源代码只占了编译后体积的20%）。

类似下面这张图：

于是不得不开始优化，比如治标不治本的code split（代码体积并没有减小，只是拆分了），比如万试万难灵的 tree shaking（你确定shaking之后的代码都只有你真正依赖的代码？），优化效果有限不说，更糟糕的是依赖的捆绑。比如ant-design的模块的日期组件依赖了 moment，那我们在使用它的时候moment就被引入了。而且我即使发现体积更小的 dayjs可以基本取代moment的功能，也不敢引入，因为替换它日期组件会出问题，同时引入又增加了项目体积。

有些第三方js被合称之为“全家桶”，这种叫法让我想起了现在PC端的一些工具软件，本来你只想装一个电脑管家，结果它不断弹窗提示你电脑不安全，建议你安装一个杀毒软件，又提示你软件很久没更新，提示你安装某某软件管家…..本来只想装一个，结果装了全家。

编辑:--ns868