【万字长文】使用最新的webpack5新特性从零一步一步搭建完整的react18+ts构建环境，完善的模块热替换和构建速度和构建结果的优化。

这是我参与 8 月更文挑战的第 9 天，活动详情查看： 8月更文挑战 随着版本的迭代，业务的发展，代码会越来越多，这时候 webpack 的构建速度有可能就会变慢。 构建时间的长短直接关联着我们的工作

相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require 有些小伙伴，可能会轻蔑一笑：呵，就这，因为动态添加src被当做静态资源处理了，没有进行编译，所

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天 今天分享一下，我们项目当中的一些webpack配置，希望能给大家有所启发；只要配置多了，你就会发现其实所有的配置的都是相似的

打包体积优化！！！优化一半！！首次加载速度优化！！优化一半！！要让我们的项目fast fast fast！！

前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。 但是对项目里的webp…

文章主要介绍了什么是Vite、Vite和其他打包工具的对比以及Vite核心源码的实现。有利于大家一步一步的深入Vite的核心源码实现、了解其设计思想。

本文以构建可被摇树优化的库为主线，深入介绍了打包工具（bundler）执行摇树优化的原理，以及一个库适配这种优化的方法。

一、开始 近期将几个项目的脚手架从 Vue-CLI 替换成了 Vite，直呼真香，原来冷启动2分多钟，现在只要几秒，对于需要频繁切项目的人来说，真的是开发利器。 当前 Vite 的优点不止于此，这篇文