webpack

129 阅读1分钟

自己实现的mini-webpack;欢迎star

webpack

基于Tapable发布订阅模式。打包过程中存在很多声明周期

webpack打包流程

webpack打包流程

webpack打包文件分析

webpack打包文件分析

HMR(hot module replacement)

HMR

Loader和Plugin

loader和plugin比较

sourceMap是什么?

sourceMap

webpack如何实现持久化缓存

TODO

webpack实现前端性能优化

性能优化

Tree Shaking实现原理

TODO

TreeShaking

打包的hash是如何生成的?文件指纹

也就是源文件的hash,内容摘要

  • 版本管理:在发布版本时,通过文件指纹来区分修改的文件未修改的文件
  • 使用缓存:未修改的文件,文件指纹保持不变,浏览器继续使用缓存访问

常用

  • hash
  • chunkhash
  • contenthash

哈希函数

具有一个雪崩效应:明文发生了简单变化,密文发生了剧烈变化

如何优化webpack的构建速度

TODO

代码分割(分包)的本质是什么?什么情况下做分包?

TODO 代码分离

Babel原理

TODO

做过哪些webpack的性能优化?

TODO 补充 webpack优化

hard-source-webpack-plugin是怎么做缓存的?修改文件后会怎么样?

TODO

cache-loader和hard-source-webpack-plugin的区别是什么?

TODO

Eslint和Prettier冲突怎么解决

TODO