webpack优化配置

南果梨
297 阅读1分钟

面试好文

优化点

image.png

HMR

image.png html不用HMR是因为就一个文件，只要改动这个文件就肯定改动，所以不需要HMR

image.png 只有非入口文件可以做HMR功能 image.png

热更新原理

image.png

image.png

image.png

source-map

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

优化配置

oneof

提升构建速读，一个文件不会被多次loader image.png

缓存

image.png

image.png js缓存 babel缓存 image.png

文件资源缓存 给文件名加hash

image.png

所有根绝一个入口文件引用的代码块都是同一个chunk

tree shaking

image.png

image.png

image.png

image.png image.png

代码分割

image.png 配置多入口文件 image.png

配置optimization

image.png image.png image.png

image.png 用es10新语法 image.png

image.png

懒加载 预加载

image.png image.png

PWA

image.png

image.png

image.png

图片压缩

image.png

image.png

多进程打包

image.png

babel优化

image.png

image.png

external和resolve配置

忽略某些包打进最后生成的js文件

image.png

dll

提取公共

image.png

image.png

模块联邦（webpack5）

image.png

image.png

image.png

调用方

image.png

image.png

总结

image.png

react打包插件配置

image.png

webpack5

image.png

avatar
文章
阅读
粉丝