背景 在线上部署期间，或者用户长时间没有访问网页等等各种情况，有一定概率会出现以下形式的报错，导致网页白屏 原因与方案 由于现代前端工具链打包出来的，尤其是 webpack 的项目，其主入口默认不缓存，其他文件长期缓存，缓存的文件通过改变文件名（一般是 hash）来更新 所以在部署期间或者用户没有长时间打开网页，可能会请求已被删除的对应的 chunk 或者 chunk… »

需求背景 由于公司老项目采用 cra 来构建前端项目，在 jenkins 上的平均打包时长在 10 分钟以上，需要优化线上的打包时间，同时优化本地的开发体验 一期优化 主要针对 cra + webpack3/4 进行的优化 具体功能 cra 配置优化 核心：thread-loader 加快首次编译速度，hard-source-webpack-plugin 加快二次编译速度 config-overrides.js Dockerfile 配置缓存优化 需求背景 为了充分利用缓存，采用 docker… »

基础 简介 entry（入口） 入口起点（entry point）即是 webpack 通过该起点找到本次项目所直接或间接依赖的资源（模块、库等），并对其进行处理，最后输出到 bundle 中。入口文件由用户自定义，可以是一个或者多个，每一个 entry 最后对应一个 bundle。 output（出口） 通过配置 output 属性可以告诉 webpack 将 bundle 命名并输出到对应的位置。 loader webpack 核心，webpack 本身只能识别 js 文件，对于非 js… »

webpack 构建后代码 打包单一模块 webpack.config.js chunk1.js 打包后，main.js（webpack 生成的一些注释已经去掉） 这其实就是一个立即执行函数，简化一下就是： 看一下自运行的匿名函数里面干了什么： 整个函数里就声明了一个变量 installedModules 和函数 ，并在函数上添加了一个 m,c,p 属性，m 属性保存的是传入的模块数组，c 属性保存的是 installedModules 变量，P… »

处理流程 首先从源码解析(Parsing)开始，解析包含了两个步骤 词法解析(Lexical Analysis) 词法解析器(Tokenizer)在这个阶段将字符串形式的代码转换为 Tokens(令牌)。Tokens 可以视作是一些语法片段组成的数组。例如 词法解析后的结果如下: 从上图可以看，每个 Token 中包含了语法片段、位置信息、以及一些类型信息，这些信息有助于后续的语法分析。 语法解析(Syntactic Analysis) 这个阶段语法解析器(Parser)会把 Tokens… »