在 React 内部，React 会使用几项巧妙的小技术，来优化计算更新 UI 时，所需要的最少的更新 DOM 的操作。在大多数情况下，即使你没有针对性能进行专项优化，React 依然很快，但是仍有一些方法可以加速 React 应用程序。本文将介绍一些可用于改进 React 代码的有效技巧。
原文：Build a universal React and Node App 演示：https://judo-heroes.herokuapp.com/ 译者：nzbin 译者的话：这是一篇非常优秀的 React 教程，该文对 React 组件、React Router 以及 Node 做了很好的梳理。我是 9 月份读的该文章，当时跟着教程做了一遍，收获很大。但是由于时间原因，直到现在才与大家分享，幸好赶在年底之前完成了译文，否则一定会成为 2016 年的小遗憾。翻译仓促，其中还有个别不通顺的地方，望见谅
曾经发表过一篇性能优化的文章《前端性能优化指南》，笔者总结了一些在项目开发过程中使用过的性能优化经验。说句真话，性能优化可能在面试过程中会有用，实际在项目开发过程中可能没几个同学会注意这些性能优化的细节。
前言 《React移动web极致优化》也提到了，构建工具是前端优化的重要一环。而React的推荐构建工具则是Webpack。这篇文章我们就来聊聊如何在Webpack构建的过程中如何针对React的应用
业界主流的开发工具还是以 Webpack 为主，随着项目体积增大，开发阶段一次性将源代码和第三方依赖编译处理打包到一起的耗时会显著增加。在我们团队内部的 monorepo 仓库中，应用项目开发时，为了开发阶段调试方便，通常也会对一些公共库源码一起打包编译，成千上万个模块导致首次 dev server 启动耗时在几分钟甚至十几分钟，严重影响了开发效率与体验。
导语：Kbone 是微信推出的 Web 与小程序同构解决方案，该方案现已支持 Vue、React 等同构 本文目录一览： 1. 背景 2. 框架选择 3. React-Kbone-Miniprogram 过程 4. 接入现有工程 4.1 构建配置 4.1.1 Babel 4.1.2 Tree Shaking 4.1.3 与小程序代码复用 4.2 代码编写 4.2.1 小程序、H5 公共库适配 4.2.2 op
对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，这是可以优化的。
允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
前几天听一个朋友说到 snowpack, 便去去看了下这个包是干什么的，看了下官网，发现这个东西还是蛮有意思的。号称 无需打包工具（Webpack，Parcel）便能将代码结果实时展现在浏览器中。可以先看以下的图，是不是很诱人？
在上一节中我们初步了解了webpack可以利用内置静态模块类型(asset module type)来处理资源文件，我们所知道的本地服务，资源的压缩，代码分割，在webpack构建的工程中有一个比较显著的特征是，模块化，要么commonjs要么esModule,在开发环境我们都是基于这两种，那么通过webpack打包后，如何让其支持浏览器能正常的加载两种不同的模式呢？
此处主要介绍使用动态导入（通过模块中的内联函数调用来分离代码）的懒加载。这种动态代码拆分的方式是webpack提供并推荐选择的方式。其原理是使用符合 ECMAScript 提案 的 import() 语法 来实现动态导入。
（给全栈前端精选加星标，提升前端技能） 原文地址：https://juejin.cn/post/6911472693405548557 作者：贩卖焦虑 前言 性能优化 ，每个工程师跑不掉的一个话题。
---- webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代，让很多同学在学一个版本的时候，下一个新版本就发布了，让人感觉非常蛋疼和无奈： “我是谁，我在干嘛，我要做什么？” 不过，如果你已经掌握 webpack 比较老的版本，对于新版本的学习而言，应该只需要 0.5 天的工作量就可以完成。因为，其基本理念都是以 JS 为中心，增加的只是其辅助特性。 webpack 到目前为止已经走过了三个大版本，每个版本之间都，增加了非常多可用的特性，但是每个版本的具体配置项都有些差异，很容易让老版
资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。
CSS Modules 的用法很简单，不过现阶段还需要 webpack 的支持。CSS Modules 的功能非常少，它一共就干了两件事：局部作用域和模块依赖。
如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。
Webpack 是一个前端资源加载/打包工具，我们部门的一条主要技术栈就是Webpack+React+ES6+node，虽然之前自己做个人项目也接触好多次Webpack，但是自己并没有研读总结过Web
版权声明：本文为 FengCms FungLeo 原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/FungLeo/article/details/80841296
在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。但是当我们star了许多项目之后，回过头想找一个的项目就会发现，很难在短时间内找到它，官方也并没有提供很好的管理我们的star项目的功能，因此在市面上也出现了一些对star进行管理的工具，比如说 astralapp，Star Order等等，其实github的接口api都是开放的，我们完全可以自己构建一个属于自己的项目管理工具。公司的前端技术栈是React，而笔者之前使用的是Vue，因此正好想利用github的open api 自己构建个react的github star管理项目来加深react的使用。而大体功能我们就模仿astralapp。
TodoApp中使用了ES6的“...”语法，由于webpack无法识别，只能借助 babel 的 transform-object-rest-spread 插件完成语法降级转换；
单元测试的技术方案很多，不同工具之间有互相协同，也存在功能重合，给我们搭配测试方案带来不小的困难，而且随着 ES6, TypeScript 的出现，单元测试又增加了很多其他步骤，完整配置起来往往需要很大的时间成本。我希望通过对这些工具的各自作用的掌握，了解完整的前端测试技术方案。前端单元测试的领域也很多，这里主要讲对于前端组件如何进行单元测试，最后会主要介绍下对于 React 组件的一些测试方法总结。
随着互联网的的普及和发展，越来越多的程序开发项目逐渐在向云端转移，得益于互联网的传输稳定以及安全高效，使得开发人员可以在任何地方进行开发，并且可以方便与其他人员进行协同开发，共同推进项目进度。其次，随着云服务技术的不断发展，有很多的开发工具和开发环境别迁移到云端，云服务商能够提供稳定、高效且安全的云服务，满足程序员随时随地在云端进行开发、测试、部署、调试等一系列工作流程。
还记得当document.querySelector最开始被广泛的被浏览器支持并且结束了无处不在的JQuery。这最终给我们提供了一个原生的方法，虽然JQuery已经提供了很久。我觉得这同样将会发生在像Angular和React这的前端框架身上。
在讲正文之前,看到了一篇「九边」大佬写的<笨功夫是普通人最后的依靠>文章. 其中有一些文字很打动我. 然后,秉承着「独乐乐不如众乐乐」的想法,给大家分享出来. 以下是我认为最好的一段文字,如果想看全文,可以搜索文章名字进行查阅.
之前翻译过一篇 前端工程化发展历史 的文章，Webpack、Babel 、Eslint 现在基本上就是前端项目的标配了。
在Behind the Scenes: Improving the Repository Infrastructure – React Blog看到了这个，有些惊讶，这样好的东西，为什么只是面向类库呢？什么原因致使它不适合用来构建App？
将 Storybook 升级到 8.0alpha 版本，可支持 React 服务端组件。
马上到了金三银四的时间，很多公司开启了今年第一轮招聘的热潮，虽说今年是互联网的寒冬，但是只要对技术始终抱有热情以及有过硬的实力，即使是寒冬也不会阻挠你前进的步伐。在面试的时候，往往在二面，三面的时面试官会结合你的简历问一些关于你简历上项目的问题，而以下这个问题在很多时候都会被问到
以上就是4版本之前的使用方式，但是这种方式在4版本中就不能使用了，4版本有自己的新的方式
写在前面 这里主要介绍自己在React开发中的一些总结，关于react的渲染问题的一点研究。 另外本人一直希望在React项目中尝试使用，因此在之前已经介绍过immutable的API，可以参看这里Immutable日常操作之深入API，算是对其的一个补充。 本文所有代码请参看github仓库：https://github.com/Rynxiao/immutable-react 渲染房间列表 这个例子主要是写了同时渲染1000个房间，如果我添加一个房间或者修改一个房间，在react中不同的实现方式下rend
如果使用了 ART，需要安装 react-art（比如，使用了 react-native-svg 来做RN端icon方案，这就是基于 react-art）
React是FaceBook（脸书）公司研发的一款JS框架（MVC） React是一款框架：具备自己开发的独立思想(MVC：Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作
在大家的日常开发中，特别是开发大型项目，大家有没有每次打包想要骂娘的冲动！反正我是很痛苦，每次打包20分钟起，这漫长的等待时间，让人非常焦虑，遇见一些特殊问题（比如测试微信分享），必须要打包部署，看效果，你会发现，一天时间全部浪费在打包上，真所谓改代码两分钟，打包代码两小时，于是闲暇之余，研究了一下webpck打包机制，并且通过几个小插件和一些技巧成功的减少公司项目的打包时间，虽然打包时间没有断崖式的减少，但是能少一分钟，是一分钟吧，下面我们一起来研究一下webpack的性能优化，以及体积优化！
「由于链接无法跳转，请点击阅读原文查看详情喔，记得给bruce-cli一个Star」
yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置
所谓的单页面应用也就是说打包后的代码仅仅生成一份html文件，基于前端路由js去控制渲染不同的页面。
如果看过 rollup 系列的这篇文章 - 无用代码去哪了？项目减重之 rollup 的 Tree-shaking，那你一定对 tree-shaking 不陌生了。如果对 tree-shaking 相关知识不熟悉，请先点开上面这篇文章花 5 分钟了解一下：什么是 tree-shaking。
在去年的这个时候，本骚年还在被Grunt和Gulp以及各种Requirejs、Seajs团团围住攻击，狼狈不堪。后面认识了Webpack之后，基本所有项目框架都拿它来构建了。
https://github.com/es-shims/es5-shim/ Image.png 检测浏览器可支持es5，不支持就扩展，做兼容； 扩展的方法： Image.png 取所有对象的键值；
配置了那么多，优化处理却很少，特别是导出的文件只有一个，这样会让文件非常大，这时候就需要切片处理以及分离文件。
Parcel是一款极速零配置WEB应用打包工具，快速、几乎零配置是它最大的特点，开箱即用。相比webpack，Parcel对于新手来说未尝不是一个很好的选择。
配置完有关 CSS loader 后，还有一个问题，我们不想将 CSS 都插入到 style 标签中，如果 CSS 样式代码很多，会导致生成的 HTML 文件很大，我们希望使用 <link> 标签引入打包后的 CSS 文件（将 CSS 单独提取出来），这时候就要使用一个插件：mini-css-extract-plugin。
领取专属 10元无门槛券
手把手带您无忧上云
