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

webpack 的 tree shaking 的原理

Webpack 的 Tree Shaking 过程紧张包含以下步骤：

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

webpack 构建流程

• 初始化各种参数，读取配置文件，进行解析。各种merge…，形成尺度化的配置
  
• 开始编译:complier 对象初始化，注册全部的配置插件，实行run方法开始编译
  
• 从 entry 开始，读取全部的依赖树，形成 AST。不断地递归下去进行处理。
  
• 文件编译:根据文件正则匹配对应的 loader，进行文件转换
  
• 形成一个整体的资源树，完成模块的编译
  
• 输出资源:根据入口和模块的关系，组成一个个的chunk，再把每个 chunk 转换成单独的文件，准备输出。
  
• 输出完成，根据 output 配置的内容，把文件末了，写入到磁盘。
  
• 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的区别

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

如何提高 webpack 的打包速率

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

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

• code spliting：非首屏加载的数据，先清除掉。
  
• tree shaking：没用的，先干掉
  
• 压缩代码：css 压缩、JS 压缩
  
• 图片压缩：gzip
  
• 按需引入：比方组件库
  
• CDN加快：react，vue，比力大的第三方
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告