摘要：
this用的很多，react 的class component用了这么多自己也比较熟悉的了，下面就来讲讲如何判断一个this的绑定以及call、apply、bind的实现。 判断this绑定 主要就是以下的几点： 由new调用：绑定到新创建的对象上面。在类里面的contructor中，指向将要通过构 阅读全文
摘要：
每个javascript的执行上下文，都包含了三个东西 变量对象（Variable Object, VO） 作用域链（Scope Chain） this 作用域链 在《JavaScript深入之变量对象》中讲到，当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上 阅读全文
摘要：
作用域 javascript采用的是词法作用域（lexical scoping），也就是静态作用域 var value = 1; function foo() { console.log(value); } function bar() { var value = 2; foo(); } bar() 阅读全文
摘要：
原型与原型链 我觉得，直接来一张图就好了 构造函数 在上图中，Person是一个构造函数，一般情况下，它长这个样子。 function Person() { } 什么是构造函数呢？构造函数，是一种特殊的方法，主要用来在创建函数的时候初始化对象。 原型 原型，prototye，是一个对象，这个对象能够 阅读全文
摘要：
推荐几个图片压缩相关的工具： Advpng - 比较优秀的一个无损压缩工具，它会清理所有附加信息，并且将所有图像数据块关联起来使用 7zip 的 Deflate 算法以得到最好的压缩效果和效率。 pngquant - 大量的图片优化线上服务用的正是该工具，通过将图片强制调整为 8 位色值，但能保留部 阅读全文
摘要：
Bash和Zsh开启vi-mode模式, 并设置默认编辑器vim 开启bash的vi-mode模式 Bash有两种操作模式，分别是emacs-mode和vi-mode,在默认情况下使用的是emacs-mode，通过修改~/.bashrc可以开启vi-mode，方法是在~/.bashrc中写入 set 阅读全文
摘要：
原理学习 这个过程发生了什么？ 开始:从 webpack 命令行说起 通过 npm scripts 运行 webpack 开发环境: npm run dev 生产环境:npm run build 通过 webpack 直接运行 webpack entry.js bundle.js 查找 webpac 阅读全文
摘要：
初级分析:使用 webpack 内置的 stats stats: 构建的统计信息 package.json 中使用 stats "script": { "build:stats": "webpack --env production --json > stats.json" }, Node.js 中 阅读全文
摘要：
以后公司前端新项目 webpack 可以选择使用这一套通用配置，该配置满足了一下诸多功能。 使用者可以自己定义一些 loader 以及 plugin 以满足日常开发需要，在下面给出详细的注释以便理解与使用。（开发时可以把注释删掉） - webpack.base.js // webpack.base. 阅读全文
摘要：
构建配置抽离成 npm 包的意义 通用性 业务开发者无需关注构建配置 统一团队构建脚本 可维护性 构建配置合理的拆分 README 文档、changeLog 文档等 质量 冒烟测试、单元测试、测试覆盖率 持续集成 构建配置管理的可选方案 通过多个配置文件管理不同环境的构建，webpack --con 阅读全文
摘要：
webpack 日志优化 当前构建时的日志显示 展示⼀大堆日志，很多并不需要开发者关注 统计信息 stats Preset Alternative Description "errors-only" none 只在发生错误的时候输出 "minimal" none 只在发生错误或者有新的编译的时候输出 阅读全文
摘要：
前端应用服务端渲染 面向消费者、面向用户的前端应用程序，使用 ssr 是很有必要的。 作为消费者，在使用前端应用程序的时候，页面打开过程大概是以下几个步骤。 开始加载（白屏) → HTML 加载成功，开始加载数据（这个时候会有提示，短视频加载中） → 数据加载成功，渲染成功开始， 加载图⽚片资源 → 阅读全文
摘要：
代码规范 ESLint 的必要性 2017年4⽉13日，腾讯⾼级⼯程师小明在做充值业务时，修改了苹果 iap ⽀付配置，将 JSON 配置增加了重复的 key 。代码发布后，有小部分使用了 vivo 手机的用户反馈充值页面白屏，无法在 Now app 内进行充值。最后问题定位是: vivo ⼿机使用 阅读全文
摘要：
代码分割 代码分割的意义 对于大的 Web 应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是把你的代码库分割成 chunks（语块），当代码运行到需要它们的时候再进行加载。 适用的场景 抽离相同代码到一个共享 阅读全文
摘要：
webpack 打包闭包优化 现象：构建后的代码存在大量闭包代码 会导致什么问题？ 大量函数闭包包裹代码，导致体积增大（模块越多越明显） 运行代码时创建的函数作用域变多，内存开销变大。 模块转换分析 结论 被 webpack 转换后的模块 会带上一层包裹 import 会被转换成__webpack_ 阅读全文
摘要：
树摇——性能优化 性能优化的关键步骤，已在 webpack4.0 里默认支持 概念 一个模块可能有多个方法，只要其中的某个⽅法使⽤用到了了，则整个文件都会被打到 bundle ⾥面去，tree shaking 就是只把用到的⽅方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。 阅读全文
摘要：
基础库分离 思路路:将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ⽅方法:使⽤用 html-webpack- externals-plugin const HtmlWebpackExternalPlugin = require('html-webpa 阅读全文
摘要：
使用 source map 来帮助你进行本地开发，算是前端开发利器之一了 使用 source map 作用:通过 source map 定位到源代码 · source map科普⽂文:http://www.ruanyifeng.com/blog/2013/01/javascript_source 阅读全文
摘要：
说白了就是使用正则，把对应的 entry 匹配出来，然后对应生成对应的 htmlWebpackPlugins，到最后丢到插件里面。 多页面应用（MPA）概念 每一次页面跳转的时候，后台服务器都会返回一个新的 html 文档。 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多页面应用。 多⻚页⾯面打包基本 阅读全文
摘要：
资源内联 webpack 也太迷了 把字体、图片等资源内联到代码里面去 上报相关的一些点，比如 pagestart、css 初始化、css 初始化完成、js初始化、js 初始化完成。 这些都一般内联到 html 里面去，而不是单个文件上报 资源内联的意义 代码层面： 页面框架的初始化脚本 上报相关打 阅读全文