octopus的专栏

引言webpack的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。本文演示代码，仓库地址:https://github.com/Jack-cool/webpack4速度分析 ????webpack 有时候打包很慢，而我们在项目中可能用了很多的plugin和loader，想知道到底是哪个环节慢，下面这个

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。Plugin 的特点 是一个独立的模块 模块对外暴露一个 js 函数 函数的原型(prototype)上定义了一个注入compiler对象...

在 webpack 中，专注于处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。它和loader有以下区别： loader是一个转换器，将 A 文件进行编译成 B 文件，比如：将A.less转换为A.css，单纯的文件转换过程。webpack 自身只支持 js 和 json 这两种格式的文件，对于其他文件需要通过loader将其转换为 commonJS 规范的文件后，webpack 才能解析到。 plugin是一个扩展器，它丰富了 webpack ...

背景Webpack 特别难学！！！时至 5.0 版本之后，Webpack 功能集变得非常庞大，包括：模块打包、代码分割、按需加载、HMR、Tree-shaking、文件监听、sourcemap、Module Federation、devServer、DLL、多进程等等，为了实现这些功能，webpack 的代码量已经到了惊人的程度： 498 份JS文件 18862 行注释 73548 行代码 54 个 module 类型 69 个 dependency 类