工程化

今天主要讲解一下webpack的拆包逻辑，现在的webpack实际上有一套默认的拆包逻辑，这个默认配置对绝大多数用户来说非常友好。

Vite在开发阶段使用esbuild进行依赖预构建，然后基于浏览器原生支持的ESM完成开发预览，而在生产环境打包时，直接使用的rollup构建。那么在这种背景下，Vite的插件机制应该如何设计？

前面我们有提到Vite在开发阶段，提倡的是一个no-bundle的理念，不必与webpack那样需要先将整个项目进行打包构建。

接上篇文章，我们了解到vite的本地构建原理主要是：启动一个 connect 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一下编译最终以 ESM的格式返回给浏览器。

vite整体思路：启动一个 connect 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一下编译最终以 ESM的格式返回给浏览器。

作为前端人员肯定经常遇到这样的场景：需求刚上线，产品拿着手机来找你，为什么页面打开这么慢呀，心想自己开发的时候也有注意性能问题呀，不可能会这么夸张。那没办法只能排查下是哪一块影响了页面的整体性能

想必大家在工作过程中都遇到过node版本带来的各种各样的问题，对于团队协作项目，你不能保证所有人的本地node版本都相同，那么应该如何管理项目的node版本

上篇文章的最后我们使用Docker部署了一个纯前端项目，但还有一个很重要的问题就是容器中产生的数据（比如log文件），容器一旦被删除，容器内的所有数据也就没有了，为了避免这个问题我们可以将数据存储到容

Docker是一个开源的应用容器引擎，它是基于Go语言并遵从Apache2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的机器上

本篇文章将介绍一些webpack的进阶用法，演示内容继承自上一篇文章的内容，所以没看过上一篇文章的建议先学习上一篇内容再阅读此篇内容，会更有利于此篇的学习～

webpack 是一种用于构建 JS 应用程序的静态模块打包器，它能够以一种相对一致的处理方式，加载应用中的所有资源文件（图片、CSS、视频、字体文件等），并将其合并打包成浏器兼容的 Web 资源。

yarn的出现则是为了解决npm带来的诸多问题，虽然yarn提高了依赖包的安装速度与使用体验，但它依旧没有解决npm的依赖重复安装等致命问题。pnpm的出现完美解决了依赖包重复安装的问题。

我们知道webpack有个通病，那就是随着项目的不断增大每次构建的时间也会随之越来越长。一起来看看如何将项目的冷启动时长从1分20秒左右优化到十几秒左右吧～

在w3c 规范中，CSS 始终是「全局生效的」。在传统的 web 开发中，最为头痛的莫过于处理 CSS 问题。因为全局性，明明定义了样式，但就是不生效，原因可能是被其他样式定义所强制覆盖。

AST对于编程来讲是一个非常重要的概念，当然也包括前端，在很多地方都能看见AST抽象语法树的影子，其中不乏有vue、react、babel等，简单来说但凡需要编译的地方基本都能发现AST的存在。