前端面试宝典---webpack面试题

webpack 的 tree shaking 的原理

Webpack 的 Tree Shaking 过程主要包含以下步骤：

1. 模块依赖分析：Webpack 首先构建一个完整的模块依赖图，确定每个模块之间的依赖关系。
2. 导出值分析：通过分析模块之间的 import 和 export，Webpack 识别出哪些导出值被其他模块引用。
3. 未使用代码识别：通过对比模块的导出值和引用情况，Webpack 可以确定哪些代码是未被使用的"死代码"。
4. 代码移除：最后，Webpack 会从构建包中移除这些未使用的代码，从而减小最终文件的大小。

webpack 构建流程

1. 初始化各种参数，读取配置文件，进行解析。各种merge…，形成标准化的配置
2. 开始编译:complier 对象初始化，注册所有的配置插件，执行run方法开始编译
3. 从 entry 开始，读取所有的依赖树，形成 AST。不断地递归下去进行处理。
4. 文件编译:根据文件正则匹配对应的 loader，进行文件转换
5. 形成一个整体的资源树，完成模块的编译
6. 输出资源:根据入口和模块的关系，组成一个个的chunk，再把每个 chunk 转换成单独的文件，准备输出。
7. 输出完成，根据 output 配置的内容，把文件最后，写入到磁盘。
8. webpack的hooks：中间不同时段会有不同的plugin执行

loader 和 plugin 的区别?

loader: 转换器，核心是解析.
webpack 没有 loader 的话，只能打包基础的 cjs的 js 文件，对于 css，静态资源 是无法实现打包的，这时候就需要引入 一些 loader 来进行文件的处理，更多的是，文件的转换器。

plugin: 插件，主要是扩展webpack 的功能，在 webpack 的运行周期里，会有一些 hooks 对外暴露，所以在webpack 打包编译的过程中， plugin 会根据这些 hooks 执行一些自定义的操作，来实现对输出结果的干预的增强。

区别:
loader 更专注于 文件的转换，是转换器，让 webpack 处理非JS 模块plugin 更专注于 流程的扩展，是扩展器。让输出资源的能力更丰富。

webpack中hash、chunkhash和contenthash的区别

1. hash：一整个项目，一次打包，只有一个hash值
2. chunkhash：一个入口打包出来的文件所得到的是同一个chunkhash
   • 从入口entry出发，到它的依赖，以及依赖的依赖，依赖的依赖的依赖，等等，一直下去，所打包构成的代码块(模块的集合)叫做一个chunk，也就是说，入口文件和它的依赖的模块构成的一个代码块，被称为一个chunk。
   • 所以，一个入口对应一个chunk，多个入口，就会产生多个chunk
   • 所以，单入口文件，打包后chunkhash和hash值是不同的，但是效果是一样的
3. contenthash：该哈希只会和文件内容有关，是控制力度最细的

如何提高 webpack 的打包速度

• 使用多进程打包: 使用 thread-loader，happypack 等工具，将构建的流程分解为多个进程或线程去处理。esbuild，swc 相关。
• 使用 dllPlugin 将第三方库预先进行打包，减少构建;
• 使用 HardSourceWebpackPlugin, 缓存一些中间文件，加速后续的构建流程
• 使用 tree shaking
• 移除不需要的loader和不必要的插件
• cache-loader：开启Cache-loader 实现打包缓存，对于之前读过文件进行缓存，而不需要再去读系统文件

如何减小 webpack 打包后的体积/性能优化

1. code spliting：非首屏加载的数据，先排除掉。
2. tree shaking：没用的，先干掉
3. 压缩代码：css 压缩、JS 压缩
4. 图片压缩：gzip
5. 按需引入：例如组件库
6. CDN加速：react，vue，比较大的第三方