最近在项目中遇到一个很奇怪的问题。在使用SVG图片平铺作为页面背景时，会出现下图的情况，代码如下：1
2
3
4
5.edit-canvas-name {
background-image: url('./layout.svg');
background-size: 100% 100px;
background-repeat: repeat-y;
}
详解 Webpack 之 externals 的使用
在项目开发过程中，不可避免地会引入许多第三方库，导致 Webpack 打包后的 bundle 文件过大，Webpack 提供的外部扩展(externals)可以很好地解决这个问题。
externals会告诉 Webpack 无需打包哪些库文件，然后我们再通过 CDN 引入。
TCP建立连接过程中为什么需要“三次握手”
TCP 为什么是三次握手，而不是两次或四次？之前对此一直是模模糊糊，最近在看这方面的知识，把看到的一些比较好的解释和最近的一些理解组织一下和大家交流分享一下。
递归组件多语言传递问题
大家都知道使用多语言在配置好之后只需要在相应文件里1
2
3
4
5
6
7
8
9
10
11
12
13...
import { translate } from 'react-i18next';
@translate()
export default class PersonInfo extends React.Component {
render() {
let { t } = this.props;
return (
<div>{t('example.key')}</div>
)
}
}
...
但是我在给项目加入多语言的时候，遇到一个很奇怪的问题，有个文件加入多语言后一直会报
Uncaught (in promise) TypeError: t is not a function
初探 Webpack 性能优化
Webpack是现在主流的功能强大的模块化打包工具，在使用Webpack时，如果不注意性能优化，有非常大的可能会产生性能问题，比如开发时打包构建速度慢、开发调试时的重复性工作等。本文将会讲解一些基本的Webpack性能优化问题。
一、优化构建速度
设置
resolve.modules:[path.resolve(__dirname, 'node_modules')]避免层层查找。resolve.modules告诉webpack去哪些目录下寻找第三方模块，默认值为['node_modules']，会依次查找./node_modules、../node_modules、../../node_modules。
初探 Virtual DOM
（一）什么是虚拟DOM
传统的 DOM 操作是直接在 DOM 上操作的，当需要修改一系列元素中的值时，就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行 Diff 操作，只选择需要修改的部分。在React中，render执行的结果得到的并不是真正的DOM节点，而是轻量级的JavaScript对象，我们称之为Virtual DOM。
而对不需要大量操作 DOM 的页面来说，虚拟 DOM 可能不是最佳的，React 和 Vue 从来没保说过他们比原生操作 DOM 更快，引用腾讯 AlloyTeam 的一段话：
没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。
React给我们的保证是，在不需要手动优化的情况下，它依然可以给我们提供过得去的性能。
