油墨香^-^的博客

cli本质上就是一个命令行工具，通过和用户进行命令行交互来实现指定的功能。前端实现cli其实很简单：等等，关于如何开发一个强大的cli工具还有很多内容，我们在这里就不一一赘述了，大家可以从参考lerna 的cli，阅读它的源码，它的源码写的很优质，很好读。在package.json 中加上 bin 字段："bin": {},我们在 package.json 中配置了如上的命令，实际上就是注册了 cli 的命令是 frontend。

总之，Vite之所以比Webpack快，主要是因为其采用了不同的构建机制和优化策略，特别是利用了现代浏览器对ES Module的原生支持和按需编译的策略。而Webpack的设计初衷和历史背景决定了它需要进行一定程度的打包和转换工作，以适应不同的构建需求和环境。随着ES Module的普及和浏览器对其原生支持的增强，Webpack也在不断更新和优化，以更好地支持ES Module。然而，Webpack的设计和架构决定了它仍然需要进行一定程度的打包和转换工作，以确保代码能够在不同的环境中正确运行。

Webpack 是一个静态模块打包器，它通过分析项目的文件依赖关系，然后生成一组包含所有文件和依赖的“打包文件”。Webpack 本身主要理解 JavaScript，但通过各种加载器（loader）和资源模块（asset module），它能够处理多种不同类型的文件。

Webpack的打包过程是一个复杂但高度可配置的过程，它能够将多个JavaScript、CSS、图片等资源文件打包成一个或多个bundle文件，以便在浏览器中快速加载。此外，Webpack的打包性能也受到多种因素的影响，如项目规模、资源数量、插件和加载器的使用等。因此，在实际开发中，需要根据项目情况合理配置Webpack，以优化打包性能和结果。需要注意的是，Webpack的打包过程是高度可配置的，开发人员可以通过修改配置文件和编写自定义插件来扩展Webpack的功能，以满足不同项目的需求。

请注意，以上优化策略并非全部，具体使用时还需根据项目的实际情况和需求进行选择和调整。同时，请注意在优化过程中保持代码的可读性和可维护性。Webpack 5 提供了多种性能优化手段，旨在提高构建速度和减少最终产物的大小。

懒加载是一种延迟加载技术，指在需要使用某个对象或数据时才进行加载，而不是在系统启动或页面加载时就立即加载。这种技术可以应用于图片、视频、音频、数据库查询、代码模块等多种资源类型1234。异步加载：重点在于资源的加载和执行是并行的，不会阻塞页面渲染，但资源的执行顺序是不确定的。延迟加载：重点在于资源的按需加载，即在需要时才加载资源，以减少初始加载时间。对于脚本来说，虽然延迟加载的脚本不会阻塞页面解析，但它们会在页面解析完成后按顺序执行（如果使用defer属性）。

异步加载（Async Loading）和延迟加载（Deferred Loading）有什么区别？什么是重排（Reflow）和重绘（Repaint）？如何减少它们对性能的影响？使用React/Vue/Angular等框架时，如何避免不必要的渲染？你如何使用构建工具（如Webpack、Gulp等）来优化前端性能？什么是懒加载（Lazy Loading），它如何帮助提升性能？如何设置合适的缓存策略来减少服务器请求？如何优化移动设备上的页面加载性能？如何减少HTTP请求的数量？如何优化Web字体的加载？

通过上面这四种方法，我们应该对这个场景有比较熟悉的理解了，选择哪种方法取决于你的具体需求、对第三方包的修改程度以及是否希望将这些修改贡献给社区。通常，提交 PR 和使用 Fork 是首选方法，因为它们可以避免维护自定义修改所带来的长期负担。

因此，使用相对路径导入可能会变得更长且更混乱，这可能会对代码的外观产生负面影响，并让辨识代码的来源变得更加困难，更加重要的是代码文件位置变动相对路径就得改变。路径别名固然是非常好，但是在项目中却需要在多处指定，即使你的项目足够简单，只要用了 TypeScript 本上也需要指定两次。此外，这种方法允许使用别名而不需要构建步骤，重要的是。使用路径别名即绝对路径导入，不仅解决了理解导入路径的问题，而且还简化了重构期间代码移动的过程，美丽且直观。代码导航和自动完成编辑器默认支持，而不需要任何额外的设置。

webpack-dev-server/client 传给它的信息以及 dev-server 的配。步，主要是 dev-server 的中间件 webpack- dev-middleware。webpack-dev-server/client 端并不能够请求更新的代码，也不会执。和 webpack 之间的交互，webpack-dev-middleware 调。在 Webpack 中，loader 的执行顺序是从右向左执行的。步是 webpack-dev-server 和 webpack 之间的接。

uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码。webpack-parallel-uglify-plugin: 多核压缩，提。source-map-loader：加载额外的 Source Map。mini-css-extract-plugin: CSS 提取到单独的。url-loader：和 file-loader 类似，但是能在。html-webpack-plugin：简化 html。css-loader：加载 CSS，file-loader：把。

于基础库的打包，如 vue、d3 等: Rollup 就是将各个模。程度上降低代码体积,但是rollup没有webpack如此多的的。个参数，这个参数是模块对象，键为各个模块的路径，件中，并且通过 Tree-shaking 来删除。型复杂的前端站点构建: webpack 有强。级功能，其更聚焦于库的打包，因此更适。函数内部则处理模块之间的引。如代码分割、按需加载等。态差、报错信息不够全。

替 Grunt、Gulp，npm script 同样可以打造任务流。赖关系图 (dependency graph)，其中包含应。切当成模块，当 webpack 处理应。Grunt、Gulp 是基于任务运。线，把资源放上去然后通过不同插件进。Webpack 是基于模块化打包的。动化处理模块，webpack 把。个或多个 bundle。npm script 代。跃的社区，丰富的插件，能。然后将所有这些模块打包成。程序时，它会递归地构建。程序需要的每个模块，因此这是完全不同的两类。

webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速 度。DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤。预 编译，再通过 DllReferencePlugin 将预编译的模块加载进来。Tree-shaking 和 Scope Hoisting 来剔除多余代码。CommonsChunkPlugin 来提取公共代码。2.通过 externals 配置来提取常。但绝对不会修改的 npm 包来进。

同理运行yarn dev:wc2，将会打印出.env.wc2，.env.wc2.development，.env.wc2.production中的环境变量。同理新建env/.env.wc2，env/.env.wc2.development，env/.env.wc2.production三个文件，分别对应着项目2默认配置，项目2开发环境配置，项目2生产环境配置。它由base 配置项决定。优先级：.env.development || .env.production > .env.local > .env。

Volta是一种管理 JavaScript 命令行工具的便捷方式。volta的特点：速度无缝，每个项目的版本切换跨平台支持，包括 Windows 和所有 Unix shell支持多个包管理器稳定的工具安装-无需每次升级都重新安装!可扩展性挂钩用于特定于站点的定制。

因为配置文件代码可能会有第三方库的依赖，所以当第三方库依赖的代码更改时，Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改，再重启 DevServer ，来保证当前生效的配置永远是最新的。不过，后面 Vite 还会处理一些边界情况，在用户配置不合理的时候，给用户对应的提示。其次，在加载配置文件的过程中，Vite 需要处理四种类型的配置文件，其中对于 ESM 和 CommonJS 两种格式的 TS 文件，分别采用了AOT和JIT两种编译技术实现了配置加载。

1. extends（1）在 JS 中，担当类的继承重担（2）在 TS 类型中，当泛型约束（3）在 TS 类型中，条件判断的关键词2. in遍历，用于取联合类型的值，主要用于数组和对象的构造。不要用于 interface，否则会出错。} */3. keyof获取类、对象、接口的所有属性名组成的联合类型。} */4. infer泛型与条件与类型推断变量。表示在 extends 条件语句中以占位符出现的用来修饰数据类型的关键字，被修饰的数据类型等用到的时候才能被推断出来作用：获取参数，返回值，泛型 的类型。

近期对自己负责的项目进行优化，但 webpack 这块一直有着茫然的不熟悉，本着对 webpack 打包配置及项目优化的进一步理解和学习，所以记录下自己学习的流程，加深印象，有深入的理解后再进行补充。另外，对不同版本的 webpack（比如 webpack4 和 webpack5），在一些配置的参考上会略有不同。此测试项目已上传至gitee：https://gitee.com/Faith-yin/demo_webpack，有错误及不准确之处，欢迎评论指正~

（2）配置：​​​​​​​​​​​​​​通过DefinePlugin实现新建 config/dev.env.js​​​​​​​​​​​​​​​​​​​​​。

因为配置文件代码可能会有第三方库的依赖，所以当第三方库依赖的代码更改时，Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改，再重启 DevServer ，来保证当前生效的配置永远是最新的。因为配置文件代码可能会有第三方库的依赖，所以当第三方库依赖的代码更改时，Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改，再重启 DevServer ，来保证当前生效的配置永远是最新的。

Vite是新一代前端开发与构建工具，能够显著提升前端开发体验。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。由于其原生 ES模块导入方式，可以实现非常快的冷服务器启动。Vite 是 vue 的作者尤雨溪在开发vue3.0的时候开发的一个。

Webpack和Gulp都是前端构建工具，但它们在设计理念和使用方式上有所不同。下面分别介绍一下Webpack和Gulp，并描述它们在项目中的典型使用场景。

在Webpack中，提取公共模块是一种优化手段，可以避免在每个页面都重复加载相同的代码。和。entry定义了应用程序的入口文件，同时通过vendor定义了公共模块（例如，React 和 React DOM）。配置用于告诉Webpack在构建时如何拆分代码。表示将所有模块中的公共代码提取到一个单独的文件。配置用于将运行时代码提取到一个单独的文件中，以便在模块发生变化时不影响缓存。

综上所述，Webpack 中 Tree Shaking 的实现分为如下步骤：在插件中根据模块的列表收集模块导出值，并记录到 ModuleGraph 体系的中在插件中收集模块的导出值的使用情况，并记录到集合中在方法中根据导出值的使用情况生成不同的导出语句使用 DCE 工具删除 Dead Code，实现完整的树摇效果。

同时，通过这次优化，也告诉我们在开发 JS 模块的时候要尽量避免模块副作用，将模块级别中的函数调用比如模块的初始化等，交给模块的使用方来做。这样的后果是 Vite 构建出来的文件数量更多，而 Webpack 构建出来的代码量更多（重复代码加上 Webpack 运行时的代码）。但是，用 Webpack（5.41.0）构建出来只有三个文件（index，a，b），其中 a 和 b 中都有 c 的代码。可以看到，a b c 的代码都合并到了一个 chunk 中，看来这个问题就这么简单的搞定了！但是可以当做纯函数。

综上所述，其实本质上，我们对与webpack构建效率的优化措施也就两个大方向：缓存和多核。缓存是为了让二次构建时，不需要再去做重复的工作；而多核，更是充分利用了硬件本身的优势（我相信现如今大家的电脑肯定都是双核以上了吧，我自己这台公司发的低配 MAC 都有双核），让我们的复杂工作都能充分利用我们的 CPU。而将这两个方向化为实践的主角，也是我们前面介绍过的两大王牌，就是：cache-loader 和 happypack，所以你只要知道它并用好它，那你就能做到更好的构建优化实践。

Lightning CSS 是一个用 Rust 编写的极快的 CSS 解析器、转换器和压缩器。通俗的讲，Lightning CSS就是Rust版本的PostCSS,然后 Lightning CSS内置了一些功能，比如 CSS压缩，语法降级，语法支持前缀，CSS模块化功能。并且，Lightning CSS可以与 Parcel 一起使用，也可以作为独立库或 CLI，或通过插件与任何其他工具一起使用。与其他的CSS方案相比，Lightning CSS具有明显的优势：图片。

到了这一步，整个文件夹已经完全瘦身了。从一开始的30MB到现在的11.8MB了。我们在项目里面放置了许多json数据(因为业务原因不能上传到服务器)，json数据已经占了差不多5、6mb的原因，所以是一个单纯的项目并没有这么大。image.png。

在使用vue编译后需要上传到服务器，之前用的sftp客户端来上传，比较麻烦。现在使用gulp实现自动化部署。

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？

webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念👇Entry:webpack开始构建的入口模块Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。Plugins。

在阅读本文之前，我就默认电脑前的你已经掌握了webpack的基本配置，能够独立搭建一款基于webpack的前端自动化构建体系，所以这篇文章不会教你如何配置或者使用webpack，自然具体概念我就不做介绍了，直面主题，开始讲解webpack原理。初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件接下来，我们将对具体流程逐一介绍。

本文已收录在Github，欢迎Star。从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这次的自我介绍我做足了准备，很有信心征服面试官。不出我所料，面试官被我引入了我擅长的领域。看来你对Webpack很熟悉，那我来考考你。

通过一步一步的debug，会发现 enhance-resolve 这个库，把 tapable 给用的出神入化，核心的处理逻辑都在Resolver上，而则像是 流水线的 线长，借用Resolver的能力，去指定流水线的流程，分配流水线每个流程应该协作的工种。总的逻辑通下来，你会发现，所有的插件都是在对obj 对象做数据变更，每个插件都有自己的职责，互不干涉，互不影响，通过NextPlugin，这个外卖小哥插件，把 数据在各个 hook 流程之间进行流转，进而建立起一套高效的流水线系统，

回应标题：为什么我建议你一定要读一读 Tapable 源码？所有人都知道Webpack很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式。而实现这一切的核心就是借助了Tapable。关于Tapable的源码其实并没有多少代码量，学习它的原理首当其冲的一定是可以让你在日常开发中更得心应手，解决相关问题更加顺畅。其次，Tapable 的内部以特别巧妙的方式实现了发布订阅模式。

我们可以看出来，qwik 的核心思路还是通过更加细粒的代码控制配合惰性加载事件处理程序以及事件委托来缩短首屏 TTI。文章中我们也讲到了 qwik 其实并不是因为使用了多么牛逼的算法导致它有多么快，而它的速度正是得益于它的设计思路，省略了传统 SSR 下首屏需要加载庞大的 JS 进行 hydration 的过程。当然，笔者对于 qwik 也仍是在学习阶段。后续会在公司里的更多项目尝试 qwik 之后也会和大家分享关于它的更多心得。

对于应用适用于 webpack，对于类库更适用于 Rollup，react/vue/anngular 都在用Rollup作为打包工具以上代码实现过程可以帮你简单的实现一个 rollup 打包流程，但也仅仅是对 rollup 源码进行了抽象，方便大家理解 rollup 打包的原理，其中很多细节没有写出来，如果感兴趣的话，可以深入阅读一下源码。

在小型项目中，添加过多的优化配置，作用不大，反而会因为额外的 loader、plugin 增加构建时间；在加快构建时间方面，作用最大的是配置 cache，可大大加快二次构建速度。在减小打包体积方面，作用最大的是压缩代码、分离重复代码、Tree Shaking，可最大幅度减小打包体积。在加快加载速度方面，按需加载、浏览器缓存、CDN 效果都很显著。

Babel 是一个通用的多功能的 JavaScript 编译器。此外它还拥有众多模块可用于不同形式的静态分析。静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 （执行代码的同时进行代码分析即是动态分析）。静态分析的目的是多种多样的， 它可用于语法检查，编译，代码高亮，代码转换，优化，压缩等等场景。你可以使用 Babel 创建多种类型的工具来帮助你更有效率并且写出更好的程序。在 Twitter 上关注，第一时间获取更新。