webpack中的性能优化
构建性能 这里所说的构建性能，是指在开发阶段的构建性能，而不是生产环境的构建性能。 优化的目标，是降低从打包开始，到代码效果呈现所经过的时间。 减少模块解析 模块解析包括：抽象语法树分析、依赖分析、模块依赖函数替换。 如果没有模块解析打包过程就是这样的： 如果不解析某个模块，该模块经过loader处理后的代码就是最终代码，如果没有loader对该模块进行处理，该模块的源码就是最终打包结果的代码。 对于那些已经打包好了的第三方库，可以使用这种方式，缩短构建时间。例如：jquery，它的 package.json 中main字段指向的就是已经打包好的文件。 开启方式：配置 module.noParse，被正则匹配到的模块不会解析。 优化loader性能 限制loader的应用范围 对于某些库，不使用loader，因为没有必要。例如：babel-loader可以转换ES6或更高版本的语法，可是有些库本身就是用ES5语法书写的，不需要转换，使用babel-loader反而会浪费构建时间。 通过 module.rule.exclude 或 module.rule.include，排除或 ...
二叉树和二叉搜索树总结
二叉树 节点的定义 12345678910111213class TreeNode<T> { public val: T; public right: TreeNode<T> | null = null; public left: TreeNode<T> | null = null; public parent: TreeNode<T> | null = null; constructor(val: T) { this.val = val; } isLeave() { return this.left === null && this.right === null; }} 遍历 对于二叉树来说，比较重要的一个操作就是遍历。遍历分为前序、中序、后序、层序遍历，也称为深度优先搜索和广度优先搜索。 深度优先搜索中包含了前序、中序、后序遍历。 深度优先 对于深度优先搜索最先想到的应该就是递归实现，这也是最简单的实现方式。 1234567 ...
浅析webpack打包过程
初始化 当我们运行 webpack 命令进行打包的时候，webpack第一步做的事就是将我们命令行传递的参数、webpack.config.js 配置文件的导出、默认配置进行合并，形成最终的配置然后开始打包我们的模块。 这一步做的事比较简单，对配置的处理过程是依托一个第三方库yargs完成的。 编译 这一步是最重要的一步，用于将我们的源代码转换成目标代码。 chunk chunk是打包过程中的一个产物，它表示通过某个入口模块找到的所有依赖的统称。 webpack 会根据入口模块创建一个chunk，一个项目中可以配置多个chunk。 每个chunk都有至少两个属性： name：默认为main id：唯一编号，开发环境和name相同，生产环境是一个数字，从0开始 配置中 entry 配置的就是chunk名和入口模块： 1234entry: { main: "./src/index.js", //属性名：chunk的名称， 属性值：入口模块（启动模块） a: ["./src/a.js", "./src/ind ...
webpack模块化原理
CommonJS 在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。 首先搞清楚commonjs模块化的处理方式，简单配置一下webpack，写两个模块编译一下看一下： webpack.config.js 1234module.exports = { mode: "development", devtool: "none"} index.js 12const a = require('./a')console.log(a) a.js 12const a = 'a';module.exports = a; 编译结果 查看编译结果，可以发现webpack对于每个模块的做法类似于node，将每个模块放在一个函数环境中并向其中传入一些必要的参数。webpack将这些模块组成一个对象（属性名是模块路径(模块id)，属性值为模块内容）传入一个立即执行函数，立即执行函数中定义了一个函数 __webpack_requi ...
弄明白BFC
BFC是什么 刚开始学 CSS 只知道BFC叫做块级格式化上下文，触发BFC可以解决布局的一些问题，但是具体BFC是个什么不清楚。 先说总结，BFC是一块独立的渲染区域，而且在这块区域中的规定了常规流块盒的布局： 常规流块盒在水平方向必须撑满包含块 常规流块盒在包含块的垂直方向上依次摆放 常规流块盒若外边距无缝相邻，则进行外边距合并 常规流块盒的自动高度和摆放位置，无视浮动元素 这也对应了MDN中的描述： 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 CSS 2.1 中对常规流的描述： 常规流中的任何一个盒子总是某个格式区域（formatting context）中的一部分。块级盒子是在块格式区域（block formatting context）中工作的盒子，而内联盒子是在内联格式区域（inline formatting context）中工作的盒子。任何一个盒子总是块级盒子或内联盒子中的一种。 也就是说BFC就是一个区域，所有的常规流块 ...
React 中的事件
React中的事件 在 React 中书写事件的时候和 DOM 中注册事件很类似语法区别不大： 事件名采用小驼峰命名方式 传入的函数是函数引用而不是函数名 但是 React 中的事件注册和 DOM 中的事件注册是有很大区别的。 事件的特点 对于大部分的事件（除了不会冒泡 / document 没有的）通过事件委托最终都会被注册到 document 上 12345678910function App() { return ( <div> <button onClick={() => console.log('click')}>click</button> </div> )}ReactDOM.render(<App />, document.getElementById('root'));document.getElementById('root'). ...
React Hooks总结
Hook Hook 是 React 16.8 的新增特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 在 React 中组件分为函数组件和类组件。但是函数组件能做的事有限，没有生命周期，没有状态，意味着函数组件只能做展示。 虽然类组件可以做很多事，但是类组件也有一些缺点： this 指向问题 繁琐的生命周期 其他问题 Hooks 本质上就是一个个函数（命名上总是以 use 开头，表示在函数组件中使用xxx），专门用于增强函数组件的功能（类组件不能使用），使之理论上可以成为类组件的替代品。 它们都在 react 库中，可以像这样导入： 1import React, { useState } from 'react' State Hook 该 Hook 就是让函数组件具有 state。 State Hook 所对应的函数是 useState，语义也很明确，就是在函数组件中使用 state。 有一个参数，这个参数的值表示状态的默认值 返回值是一个数组： 0. 当前状态的值 改变该状态的函 ...
React渲染原理
一些概念 **React 元素：**React Element，通过 React.createElement 创建，平常我们写的 jsx是语法糖，最终还是会被 Babel 编译成 React.createElement。 例如： 123456789101112function App() { return ( <div> <h1>hello world</h1> </div> );}ReactDOM.render( <App />, document.getElementById('root')); 经过 Babel 编译之后的代码为： 123456789101112function App() { return React.createElement( "div", null, React.createElement("h1", null, "hello wor ...
