webpack原理和优化
Webpack打包原理
Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的run方法开始执行编译;
确定入口:根据配置中的 entry 找出所有的入口文件
编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行编译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
Webpack打包优化
DLL:.dll为后缀的文件称为动态链接库,在一个动态链接库中可以包含给其他模块调用的函数和数据。把基础模块独立出来打包到单独的动态连接库里。当需要导入的模块在动态连接库里的时候,模块不能再次被打包,而是去动态连接库里获取。
多进程处理:thread-loader,把这个 loader 放置在其他 loader 之前, 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。
CDN:CDN 又叫内容分发网络,通过把资源部署到世界各地,用户在访问时按照就近原则从离用户最近的服务器获取资源,从而加速资源的获取速度。
Tree Shaking:一个模块可以有多个方法,只要其中某个方法使用到了,则整个文件都会被打到bundle里面去,tree shaking就是只把用到的方法打入bundle,没用到的方法会uglify阶段擦除掉。原理是利用es6模块的特点,只能作为模块顶层语句出现,import的模块名只能是字符串常量。
代码分割:对于大的Web应用来讲,将所有的代码都放在一个文件中显然是不够有效的,特别是当你的某些代码块是在某些特殊的时候才会被用到。webpack有一个功能就是将你的代码库分割成chunks语块,当代码运行到需要它们的时候再进行加载。相同代码到一个共享块,脚本懒加载,使得初始下载的代码更小。
动态导入和懒加载:用户当前需要用什么功能就只加载这个功能对应的代码,也就是所谓的按需加载,在给单页应用做按需加载优化时,一般对于首次打开页面需要的功能直接加载,尽快展示给用户,某些依赖大量代码的功能点可以按需加载。
webpack原理和优化相关推荐
- Webpack原理与实践
简单了解了几个常用的插件,一般适合用于任何类型的项目,不管是否使用了框架.webpack为每个工作环节都预留了合适的钩子,扩展时只需要找到合适的时机去做合适的事情. 写在前面 webpack插件机制的 ...
- 高并发之存储篇:关注下索引原理和优化吧!躲得过实践,躲不过面试官!
以MySQL的InnoDB索引为主,看完需要5分钟 本文内容预览: 为什么Kafka不需要我们关心索引,而Mysql却需要? Mysql数据怎么被组织 2.1 数据记录最小单位:行 2.2 与磁盘最小 ...
- 做diff_Vue3.0时代你必须了解的:diff算法原理和优化
关注前端公众号 [前端每日一博] 前言 面试官: 你知道 Vue3.0 Object.difineProperty和vue3.0的proxy的区别吗? 你知道 Vue3.0 diff算法原理和它有什么 ...
- 12-order by和group by 原理和优化 sort by 倒叙
========================原理和优化================================== groupBy分组?会造成一个数据倾斜 1.解决方案:将输入在map端进 ...
- Android布局原理与优化
Android布局原理与优化 目录: 绘制原理 CPU与GPU Android 图形系统的整体架构 RenderThread 硬件加速和软件绘制 invalidate软件绘制流程 invalidate ...
- 字节跳动Android三面视频解析:framework+MVP架构+HashMap原理+性能优化+Flutter+源码分析等
前言 对于字节跳动的二面三面而言,Framework+MVP架构+HashMap原理+性能优化+Flutter+源码分析等问题都成高频问点!然而很多的朋友在面试时却答不上或者答不全!今天在这分享下这些 ...
- 有关前端性能优化的方案—Vue 代码层面性能优化+Webpack 层面的优化+基础的 Web 技术优化+非框架代码优化
文章目录: 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch 区分使用场景 1.3.v-for 遍历必须为 item 添加 key,且避免 ...
- Flink checkpoint操作流程详解与报错调试方法汇总,增量checkpoint原理及版本更新变化,作业恢复和扩缩容原理与优化
这里写目录标题 flink checkpint出错类型 flink 重启策略 Checkpint 流程简介 增量Checkpoint实现原理 MemoryStateBackend 原理 FsState ...
- 直通车运营 直通车扣费原理 直通车优化方案,直通车深度解析
直通车运营 直通车扣费原理 直通车优化方案,直通车深度解析 今天我们要讲的是怎样将质量得分提高到10分,这也是开直通车需要学习的内容之一.首先需要了解直通车,才能更好的去做优化. 一.直通车的扣费原理 ...
最新文章
- Flutter开发之ListView组件(21)
- windows测试模式打开关闭
- 详细设计 存储分配_10k+点赞的 Spring Boot 后台管理系统竟然出了详细教程!爱了!...
- linux raid auto 软raid parted,linux下的raid5配置方法.doc
- 修改linux系统iqn,linux iSCSI target配置全过程
- 2011斯坦福大学iOS应用开发教程学习笔记(第二课)My First iOS App
- 在你的andorid设备上运行netcore (Linux Deploy)
- “智汇光大 E启未来” 中国光大集团ESBU协同核心系统1.0正式发布
- 【CUDA开发】 Check failed: error == cudaSuccess (8 vs. 0) invalid device function
- Docker-Compose快速部署开源网盘系统Tank蓝眼网盘系统
- vsftpd 安装配置
- python virtualenv
- wxpython SizerItem的大小控制
- Android开发笔记(十六)秋千摇摆动画SwingAnimation
- Linux系统中各种系统日志文件主要存放在系统中哪个目录
- ffmpeg拉流设置暂停_解决ffmpeg拉流转发频繁丢包问题max delay reached. need to consume packet...
- java如何实现容器_Java的容器都有哪些,怎么实现的
- 游戏测试流程及工作内容
- oracle分区表和分区索引的概念
- 调试LLVM如何生成SSA