webpack 思维导图模板_ProcessOn思维导图、流程图

webpack插件机制

webpack的插件机制依赖于一个核心的库，Tapable

Tapable

web常见性能优化

webpack的性能优化，主要体现在三个方面

1.构建性能：是指在开发阶段的构建性能。当构建性能越高，开发效率越高

1.减少模块解析

模块解析包括：AST抽象语法树分析、依赖分析、模板语法替换对某个模块不进行解析，可以缩短构建时间

如果某个模块不做解析，该模块经过laoder处理后的代码就是最终代码

如果没有loader对该模块进行处理，该模块的源码就是最终打包结果的代码

对于模块中没有其他依赖模块，则不需要解析，可以通过配置module.noParse进行处理

分支主题

2.优化loader性能

1.限制loader的应用范围

针对一些第三方库，不使用loader进行处理。例如babel-loader，转换一些本身就是用ES5语法书写的第三方库，反而会浪费构建时间

因此通过module.rules.exclude或module.rules.include，排除或仅包含需要应用loader的场景

分支主题

2.缓存loader结果

如果某个文件内容不变，经过相同的loader解析后，解析后的结果也不变，所以我们可以把loader的解析结果保存下来，让后续的解析直接用缓存的结果

分支主题

这个时候就需要用到cache-loader

cache-loader的原理是，在执行loader之前，如果发现有缓存文件，则直接在loader.pitch函数里return源代码。

loader明明不是从后往前执行的吗？那为什么cache-loader还可以拿到loader的缓存结果？答：其实在每个loader运行的过程中，还包括一个过程pitch

分支主题

第一次打包时，会先把filepath交给loader1.pitch执行, 检查是否有缓存结果，若无缓存，往后执行。调用loader2.pitch，检查是否有缓存，若无缓冲，往后执行，依次类推…直到最后结束了再调用loader，当调用cache-loader时，就会返回loader处理的结果并缓存。当第二次打包时（流程同上），若发现有缓存，则直接返回缓存结果，不会继续往后走了

分支主题

pitch的好处，可以根据是否有返回，来控制下一步到哪。对于babel-loader，使用它本身的配置也是可以缓存的。

3.开启多线程打包

通过thread-loader会开启一个线程池，它会把后续的loader放到线程池的线程中运行，以提高构建效率

分支主题

thread-loader可以通过测试决定放置的位置

放到线程池的loader的缺点

1.无法使用 webpack api 生成文件

2.无法使用自定义的 plugin api

3.无法访问 webpack options

由于开启和管理线程需要消耗时间，所以在小项目使用会增加构建时间

4.热更新

热更新是不能降低构建时间（可能还会稍微增加），因为它发生代码运行期间，但它可以降低代码改动到效果显现的时间

默认情况下，webpack-dev-server不管式否开启热更新，重新打包之后都会刷新页面，但是如果是热更新，webpack就会通过socket管道将服务器更新的内容发送给浏览器

分支主题

样式替换

对于样式替换,可以使用style-loader

分支主题

热更新原理流程

当开启热更新后，Webpack 会轮询问有没有哪些模块发生变化，如果文件内容发生改变，会异步下载更新的代码，向服务器发送请求。下载完毕后，服务器就会主动发送信息给浏览器告知有文件内容发生改变，浏览器发送请求给服务器请求发送修改后的资源文件，服务器接收到请求后把修改的资源文件发送给浏览器，浏览器把接收到的结果交给HotModuleReplacementPlugin，HotModuleReplacementPlugin再覆盖原始代码，再重新执行代码。

2.传输性能：在这方面重点考虑网络中的总传输量、JS文件数量以及浏览器缓存

1.分包

分支主题

webpack默认不进行分包，所有的依赖添加为同一个bundle,如果是多页面打包的话，会存在多个chunk引入公共模块导致代码冗余，占用打包体积

分包的目的是在不影响源代码的情况下降低代码体积

1.手动分包

1,打包公共模块，比如第三方库

分支主题

2.手动引入公共js

注：不能对小型库进行单独打包，不能对依赖多的库进行打包

2.自动分包，利用webpack的optimization配置项，配置splitchunk

分支主题

其中splitChunk是分包策略的配置，通过splitChunkPlugin配置分包策略进行分包分包时，webpack开启一个新的chunk，对分离的模块进行打包

开发阶段没必要分包，因为有热更新，而且开发一般是本地，大文件对本地开发影响不大

分包的基础单位是模块，所以设置minSize时有时会出现打包文件超过该值的情况

1.全局策略

分支主题

2.缓存组策略

修改cache Group的vendors和default配置

2.模块体积优化

1.代码压缩terser，terser是webpack内置的代码压缩工具

默认情况下webpack的production模式是开启代码压缩

更改压缩配置

/*#PURE/注释标记作用是告诉打包工具该函数的调用不会有副作用

2.tree shaking

当webpack依赖分析完毕之后，webpack会根据每个模块每个导出是否被使用，标记其为dead code,然后交给代码压缩工具处理

common.js很难做tree shaking

tree shanking 对于无法识别副作用的函数会认为是副作用函数

相比于js,css无法做到tree shanking ,可以通过purgecss-webpack-plugin进行处理，css module无法处理

3.懒加载

动态导入模块，import 的才会进行依赖分析

4.gzip

webpack可以将文件进行预压缩，在请求到来的时候直接响应压缩文件，

5.辅助：用eslint规范代码

3.运行性能：主要是指JS代码在浏览器端运行的速度

主要取决于代码的书写

webpack基础

1.webpack使用流程

1.初始化npm:npm init -y

2.下载安装webpack: npm i webpack webpack-cli -D :将webpack作为开发依赖安装

检查是否安装成功：npx webpack -v ：检查node_modules下面有没有webpack文件，有的化就读取文件里的版本信息

webpack只是代码压缩工具，只在开发阶段使用

3.开始打包:npx webpack

全称：npx webpack js文件路径：如果没有写Js路径，默认打包./src/index.js

入口：webpack打包一定要有入口文件，webpack的默认打包文件入库目录是./src/index.js，因此项目中一般都会有src目录和index.js

出口：js代码发生变化时，需要重新打包,webpack会把打包文件默认放入dist/main.js

webpack只会打包入口文件，如果想要打包其他文件，需要在入口文件导入其他模块，即被打包的文件一定会和入口文件形成直接或者间接的依赖关系

webpack模块化同时支持common.js模块化和es6模块化

common.js

导出：module.exports

导入：required

2.webpack配置文件

1.作用：修改webpack默认配置

eg：默认打包命令:npx webpack，默认入口文件:./src/index.js，默认出口文件：./dist/main.js

2.创建配置文件

1.项目根目录下创建默认配置文件--webpack.config.js

2.在配置文件中导出配置

分支主题

3.webpack常见配置作用

1.mode:打包模式

默认值production：生产模式(压缩，混淆，加密...不可读)

development：开发模式(代码不会压缩混淆)

2.output:出口文件(对象类型)

path:设置出口文件夹（必须是绝对路径）,默认值:${_dirname}/dist

filename:设置出口js文件名(相对于path路径)，默认值:main.js

3.entry:入口文件

默认值(相当于项目根目录):./src/index.js

分支主题

4.webpack其他配置

分支主题

webpack构建流程

图示

分支主题

1.初始化参数（entry-option）

从配置文件和 Shell 语句中读取与合并参数，得出最终的参数

2.开始编译（run）

用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译

3.确定入口

根据配置中的entry找出所有的入口文件

4.编译模块(make)

从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理

5.完成模块编译（build module）

经过上一步使用Loader翻译完所有的模块之后，得到了每个模块被翻译后的最终内容，以及他们之间的依赖关系

6.seal输出资源

根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会

7.emit输出完成

在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

在打包过程中，Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果

简易webpack

简易实现链接