概括 Webpack 以其使用简单著称，在使用它的过程中，使用者只需把它当作一个黑盒，需要关心的只有它暴露出来的配置。 本节将带你走进这个黑盒，看看 Webpack 是如何运行的。 基本概念 在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解： Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry… »

let 和 const 块级作用域的出现 通过 var 声明的变量存在变量提升的特性： 初学者可能会觉得只有 condition 为 true 的时候，才会创建 value，如果 condition 为 false，结果应该是报错，然而因为变量提升的原因，代码相当于： 如果 condition 为 false，结果会是 undefined。 除此之外，在 for 循环中： 即便循环已经结束了，我们依然可以访问 i 的值。 为了加强对变量生命周期的控制，ECMAScript… »

首先了解一下 webpack 的打包原理 webpack 的打包原理 chunk 和 module webpack 里面有两个很核心的概念，叫 chunk 和 module，这里为了简单，只看 js 相关的，用笔者自己的理解去解释一下他们直接的区别： module：每一个源码 js 文件其实都可以看成一个 module chunk：每一个打包落地的 js 文件其实都是一个 chunk，每个 chunk 都包含很多 module 默认的 chunk 数量实际上是由你的入口文件的 js… »

需求背景 由于客服聊天组件需要支持以新窗口的形式打开，也就是以 window.open 的新窗口打开，同时需要支持嵌入公司自己的产品端，在技术攻关的过程中遇到很多问题，特此记录 问题及解决方案 标记为横线的为完成需求后发现现阶段不需要做的 跨域窗口间的通信： 编写底层通信库 、通过 url 传递 嵌入公司产品端：独立客服聊天组件的运行环境 设置新窗口位置：需要注意兼容分屏情况 监听新窗口打开情况： 通过底层库发消息 、获取 window.open 的 closed… »

常用加速方法 通常的 web 优化方法，基本围绕在资源加载和 html 渲染两个方面。前者针对首屏，后者针对可交互。 资源优化上，我们总的方向是围绕更小的资源包上，比如常见的：压缩、减包、拆包、动态加载包及图片优化上。 html 渲染上总的方向是更快的展示内容，比如通过 cdn 分发、dns 解析、http… »