首先我们先介绍几个概念
1webpack独立配置
由于wenpack不仅仅是一个打包工具webpack页面优化，它有两种模式，一种是开发模式dev，另一种是生产模式product。
配置时我们会根据不同的需求进行独立配置。 将配置一个名为 webpack.base.confing.js 的公共版本，以及一个开发版本和产品版本。 使用配置时使用合并
当我们需要dev时：base+dev
当我们需要产品时：基础+产品
2包装流程
我们打包，输入命令npmrunbuild，然后开始打包。步骤
1使用clean-webpack-Plugin插件删除之前生成的打包文件
2使用插件生成新文件
3.生成manifest.js文件，记录并跟踪打包前的src文件与打包后的bundle文件之间的映射关系。 并使用该文件来解析并加载导入的模块。 （模块：如导入的css或js等）
4ventor.js，提取第三方库
5.app.js页面压缩文件
3sourceMap（开发体验优化）
当报告错误时，用于显示源代码中的哪个文件和行发生了错误。 用于记录打包前源代码位置与打包后位置的映射关系。 用于报告开发过程中的早晨错误。
4webpack-dev-serve（开发体验优化）
是我们后端的一个简单的Web服务器，将我们的代码放在服务上并窃听它。当我们运行代码npmrundev或npmrunstart时，我们实质上启动了webpack-dev-serve服务
5HMR（热更新）（开发体验优化）
替换更新的代码并制作bug
6treeshaking（自带包装功能）（包装体积优化）
去除导入但未引用的代码，减少打包体积
7 代码分离（包体积优化） 8 公共依赖提取（包体积优化） 9 动态导出（包体积优化） 10 延迟加载（性能优化）
当用户点击时，触发触发器时，加载js文件，然后调用js文件。
11 缓存（打包率优化）
加载资源后，我们将其缓存并将哈希值添加到文件名中。 当我们更新资源时，哈希值会发生变化。 我们都重新加载新资源。
12缩小文件搜索范围（优化打包率） 13使用DLLPlugin（优化打包率）
使用动态链接库将第三方的、未更新的包分离出来webpack页面优化，单独打包，然后引入到webpack中。
要了解DLLPlugin，首先要了解DLL的概念
DLL称为动态链接库。 您可以将其视为函数的集合。 当我们需要调用DLL中的函数时，我们首先引入DLL，然后获取函数的地址（喝）。 直接调用该函数。 它很好地显示了动态、链接（地址）和库等词。
**DLL文件存储了各种程序的函数（子进程）实现过程。 当程序需要调用函数时，必须先加载DLL，然后获取函数的地址，最后调用它。 **使用DLL文件的目的是程序不需要在开始运行时加载所有代码。 只有当程序需要某个功能时才从DLL中取出。 另外，使用DLL文件还可以减小程序的大小。
14happyPack（优化打包率）
包装时，采用多道工序，提高包装速度。 我们的js是单线程的，没能突破单线程的屏障。 而我们的笔记本电脑是多核的，可以同时处理多个进程。 所以使用多进程打包。
15parelleUginlifyPlugin（优化打包率）
使用多进程ATS解析js代码并压缩js代码
16 包装性能视觉分析
优化点
1开发体验优化
2 包装率和体积优化
还没完，待续。 。 。 。 。 。
最后附上大鳄的分析文档：简单解释一下webpack
官网文档：webpack文档
发表评论