首先我们先介绍几个概念
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文档
发表评论