- 1、source map
- 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。\
- map文件只要不打开开发者工具，浏览器是不会加载的。\
- 线上环境一般有三种处理方案：
- hidden-source-map：借助第三方错误监控平台 Sentry 使用\
- nosources-source-map：只会显示具体行数以及查看源代码的错误栈。安全性比 sourcemap 高\
- sourcemap：通过 nginx 设置将 .map 文件只对白名单开放(公司内网)
注意：避免在生产中使用 inline- 和 eval-，因为它们会增加 bundle 体积大小，并降低整体性能。
- 2、webpack中的文件监听原理
- 3、对bundle体积进行监控和分析
- VSCode 中有一个插件 Import Cost 可以帮助我们对引入模块的大小进行实时监测，还可以使用 webpack-bundle-analyzer 生成 bundle 的模块组成图，显示所占体积。\
- bundlesize 工具包可以进行自动化资源体积监控。
- 4、条件指纹
- 文件指纹是文件打包输出之后的文件名后缀，用于标识文件是否经过修改，通常用于文件的版本管理\
- [hash] - 和整个项目的构建有关，只要项目中的文件有修改，整个项目中文件的 hash 都会修改\
- [chunkhash] - 和 webpack 打包的 chunk 有关，不同的 entry 生成不同的 chunkhash （js 文件一般采用此方法）\
- [contenthash] - 根据文件内容定义 hash 值，文件内容不变，则 contenthash 值不变 （css文件一般采用此方法）
- 5、配置文件上百行，如何保证各个loader按照预想方式工作？
- 可以使用 enforce 强制执行 loader 的作用顺序，pre 代表在所有正常 loader 之前执行，post 是所有 loader 之后执行。(inline 官方不推荐使用)
- 6、chunk
- 在
webpack中，从入口文件开始可能会依赖其他模块，其他模块又可能依赖模块，webpack通过引用关系将这些模块打包成一个 js 文件，这个文件就是一个 chunk；如果在webpack中配置了多个入口文件，那么就可能有多条引用路径，就会产生不同的 chunk - 代码分割的本质其实就是在源代码直接上线和打包成唯一脚本main.bundle.js这两种极端方案之间的一种更适合实际场景的中间状态。\阿卡丽：荣耀剑下取，均衡乱中求\「用可接受的服务器性能压力增加来换取更好的用户体验。」\源代码直接上线：虽然过程可控，但是http请求多，性能开销大。\打包成唯一脚本：一把梭完自己爽，服务器压力小，但是页面空白期长，用户体验不好。(Easy peezy right)
- 在
- 7、babel和ast
- AST（抽象语法树）是源代码编译过程的中间产物，是源代码的抽象语法结构的树状表示，抽象表示把 js 代码进行了结构化的转化，转化为一种以 json 对象表示的数据结构；AST 的用途十分广泛，不仅仅用在 js 引擎的编译上，babel插件、eslint、Vue-cli等工具都是基于 AST 原理实现
- 大多数JavaScript Parser遵循 estree 规范，Babel 最初基于 acorn 项目(轻量级现代 JavaScript 解析器)\
- Babel大概分为三大部分：
- 解析：将代码转换成 AST；词法分析：将代码(字符串)分割为token流，即语法单元成的数组语法分析：分析token流(上面生成的数组)并生成 AST\
- 转换：访问 AST 的节点进行变换操作生产新的 AST；Taro就是利用 babel 完成的小程序语法转换\
- 生成：以新的 AST 为基础生成代码
- 8、Treesharking的原理，以及webpack中的Treesharking
- Tree Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术\它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。\
- 在webpack中，大致经历三个阶段\
- Make 阶段，收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中\
- Seal 阶段，遍历 ModuleGraph 标记模块导出变量有没有被使用\
- 生成产物时，若变量没有被其它模块使用则删除对应的导出语句
