原文地址 https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages

简单对一篇完整的检查表目录做一个翻译，极力推荐阅读原文，文中也提到了大量的有关性能优化策略和方法的关键字和链接，方便查询。

这两天在组里协助排查一个 webpack dev 环境下重载时内存溢出的问题，现象是 webpack-dev-server 启动的过程中，在 node 10.xx 的环境下，一旦修改文件工程自动 reload 时会出现内存溢出导致服务直接中断。

排查原因，最终发现原来是脚手架在配置开发环境的 devtool 配置时，为了方便开发者 DEBUG，设置成了 cheap-module-source-map ，在代码修改时触发自动 load，在 loader 编译映射 sourcemap 的时候溢~出~了~，本文不会说明为什么溢出，排查的过程以及解决，其实花的时间也不长，重点说明一下 sourcemap 的作用以及使用过程的几点个人思考。

写在前头

前阵子一直和组里的小伙伴共同“造轮子”，开发并维护了一套 PC 端 React UI 组件库，经过了一段时间的折腾，组件库从之前的 0.x、1.x 再到最近发布的 2.0.beta 的一个过程，这其中很多东西值得拿出来分享和讨论，有好的有失败的，今天就把组件库开发过程中的 DEMO 实时重现以及后期文档站的建设的技术选型以及实践简单做一个记录总结和大家一起做一个讨论。

调研和选型具体细节，后面找时间再梳理输出另外一篇文章，这里介绍在使用 Storybook 5 的过程中的一些问题点以及经验分享。

截止文章编写时 Storybook 6 正在进行 rc 版，作者也经历过将之前项目的 5.2.x 升级到 5.3.x 过程的阵痛，网络上关于使用 Storybook 的问题文章也比较少，除了 Storybook 官网文档以外一些问题点记录，因此成文，感兴趣可以继续阅读。有关 UI 组件库的建设，这里不做深入讨论。（就是我们暂时先不讨论 WHY 的问题，本文只讨论 HOW。）

ESLint 为团队和项目带来的益处，这里不多说，本文主要是个人近期修改项目代码一些错误修改整理的内容。

备注：尽量使用默认 Prettier 规则，根据实际情况略有调整。项目技术栈 React, Redux, Redux-Sagas, TypeScript。

理解 JavaSript SEO 基础

原文 https://developers.google.com/search/docs/guides/javascript-seo-basics

你是否怀疑过由于 JavaScript 的问题可能会影响你的网页或者某一部分内容出现在 Google Search 的结果？ 你通过我们的故障排除指南来了解如何解决 JavaScript 相关的这些问题。

JavaScript 是 WEB 平台中重要的一部分，因为它能够提供由普通 web 网站向功能更强大的应用平台转变的众多特性。开发 JavaScript 驱动的 web 应用可以帮助你吸引新用户，同时可以通过 Google 搜索到你的 web 应用提供出来的有效内容来留存现有用户。当 Google Search 通过 Chromium 引擎来执行 JavaScript 时，你可以做一些下面这些事情去进行优化改进你的 Web 应用。

笔者最近在整理前段时间接手的其他团队的 RN 项目代码，在梳理项目中旧代码过程中，对 React 中 State Store Static This 产生疑惑，借此翻译这篇文章解惑，也分享给各位。

原文 https://medium.freecodecamp.org/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00

发表时间 2016-08

作者 Sam Corcos

最近一直在参与小组内“造轮子”（具体内容另寻机会再详说）在开发的过程中，了解并且学习到 Webpack v4 的一些内容，趁记忆还深，汇总成文。

鉴于 Webpack 作为关键在 Google 可以搜索到很多相关的文章，网上文章也是针对各自项目和某些情况的具体方案或者介绍说明，本文也不例外，只介绍分享过程中积累的 4.0 版本的个人实战经验。

导读：本文你将 Get 到使用 Webpack 4 从零开始分别搭建 React 16 和 Vue 2 项目，同时还有基于 Webpack 4 的一些开发和生产环境配置经验，感兴趣同学可以继续阅读。

PS. 前半部分较为基础，有一定经验的同学可以直接跳过阅读后半部分实战内容。

作者 Addy Osmani，Ivan Akulov

原文 https://developers.google.com/web/fundamentals/performance/webpack/

PS. 在 20180211 笔者翻译过一次，当时也没有完全理解和使用文中提到的优化项，近期工作中因为用到 Webpack 4.x 对生产环境进行打包，加深了一些理解，本译文对原有译文补充的 Webpack 4 内容，同时对原译文进行了校对和一些细节措辞的修改。

原文 https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a

作者 Tobias Koppers

webpack 增加了一个模式配置（mode option）。下面来解释一下具体内容。

投稿部门公众号，做了一些微调，增加了 Android 机型的一些说明。

2018-03-01 Beanlee

相信各位在移动端开发过程中一定遇到抓取数据包、拦截请求的场景，本文主要介绍移动端在针对 HTTPS 抓包时的几款软件的配置（包括Charles、Fiddler、Whistle），下面举例将已 iOS 11 为例，附带 Android 机型配置截图。