6-依赖预构建的esbuild与缓存原创

在以前的wait的学习中，我们经常出现ES build ES build呢是一个非常快速的javascript打包工具，官网上ES build的giu的IO提到了一个例子，我们刷新一下页面，这个例子呢，它做到了一个十个three GS的copy的一个大包，包含压缩以及source map。这里呢，它以ES build passl2 roll up以及MYPE5来进行比较的。那我们看到当打完包以后，这个PAO2它的打包时间呢，是32.48秒。Up是34.95秒。而这个外派五它的打包速度呢，是41.53，我们发现它的打包速度是最慢的，那ES build呢，只用0.33秒。ES6的这个打包器的主要目标是带来一个构建工具性能的新时代，并在此过程中创造一个易于使用的现代的打包器。目前呢，已有的构建工具比ES build要慢十到100倍。

下面呢，我们来看一下ES build的一些特点，它是一个极快的速度而不需要缓存的一个打包工具，它支持ES6和common JS的模块，另外呢，它还支持ES6模块的shaking这样的功能。它是一个用于javascript和go的一个API typescript和GSX语法也是支持的，另外呢，还支持source map，它可以简化打包，并且支持插件，那我们在后面的学习过程中，或者是V核心就会使用这个e build来去打包我们的JS模块。接下来我们再来看一下weight是如何实现缓存的。

我们已经知道，Wait默认在模块预构建完成之后会对构建好的模块进行缓存。wait在服务器端是通过文件系统来实现缓存的。waitt会将预构建的依赖缓存到note modeldus下的点wait这个文件夹下。我们来看一眼，回到我们的项目，我们展开load modus下的点weight文件夹，那么这个文件夹下的文件就将来成为我们的缓存文件。那我们可以根据几个来源来决定是否重新的运行我们的预构建步骤。那第一个我们可以看看package Jason中的depend列表是否发生了变化。回到我们项目，我们可以点开package，点儿Jason，如果我们安装了新的生态环境的包，那么这里会多了一个新的依赖，那我们所谓的缓存就会重新的进行预构建。第二个，我们来看一下包管理器的一个lock file，如果我们使用NPM的话，就是package-lock.jason如果使用Yan，就是yan.lock文件。

这里呢，我们使用的是PNPM，那我们看一下PNPM-lock这个压模文件，如果这个文件发生了变化，它也会重新的进行所谓的预构建，那我们的缓存也会重新的生成。第三个我们再来看一下，如果wait.conflict GS相关字段啊，这发生了变化，我们也可以实现文件系统的缓存的重新构建，我们来看一下，现在呢，我们可以打开wait.conflict.js。在这里头呢，我们可以添加一个关于缓存的配置项，比方说我们改一下catch DR，也就是我们改变一下缓存的目标文件夹，把它改为我们当前目录下的点catch这个文件夹保存一下，我们重新的去启动一下我们的项目，执行一下PN PM run DV。

好，我发现这里报了个错，是因为我们这个模块是不存在的，我们把它注释掉，然后我们重新的再次运行我们这个服务，我们发现呢，服务已经启动起来了，并且在我们当前的这个v basics这个目录下面有一个点catch目录，在这目录下面呢，就把我们当前这个服务启动的一些服务器端的文件给缓存下来了。比如这里的v.GS以及VGS的map等等。总结一下就是当我们这三种情况一旦发生的时候呢，就会重新的运行我们的预构件，有时候出于某种原因呢，我们也想强制为重新预构建，那这个我们可以使用杠刚false命令行的选项来启动开发服务器。我们看在package的Jason里，我们每次再去通过PN PM run dev的时候，它就会运行V刚刚host，刚刚fo啊这个命令，那这个配置项就会帮助我们进行强制的本地服务端的依赖的缓存，也就是它会把我们这里的依赖的模块的缓存都清理掉，然后重新的生成。

除了这个呢，我们也可以通过另外一种方法，就是手工的把catch这个文件夹删除掉，那它也会重新生成，我们再次进行服务的重启，那它会生成一个新的点儿开始这个文件夹，它也会实现我们服务器端的缓存的重新清理。那么在浏览器端缓存呢，我们也是可以实现的，我们可以通过解析后的依赖请求，以HTTP头的max edge等于315360000I来实现强缓存，来提高我们在开发时的页面重载的性能，那一旦在浏览器端缓存了以后，这些请求将永远不会再到达开发服务器了。

当然我们也可以让缓存失效，有两种方法可以实现，第一，如果安装了不同版本的包，这个主要是反映在我们包管理器的这个lock file里头。如果这个包被重新安装了，那么附加的版本的query，比方说问号后面的那个串发生了变化，它就会自动的使它生效了。第二呢，我们可以通过本地编辑来调试依赖项，也可以是缓存失效，那禁用和清理缓存的本地调试包括，第一，我们可以通过调浏览器调试工具的network选项卡的暂时禁用缓存来实现这个浏览器缓存的所谓的禁用，我们回到浏览器。

然后我们在浏览器上面运行一下我们的项目，点击右键检查打开我们network这个选项卡，我们可以通过勾掉disable catch来去禁用我们浏览器的缓存。我们也可以通过重启DV server，添加一个刚刚false这个命令行的选项来重新构建依赖，这样也可以清理我们浏览器的缓存，这个我们已经看过了，我们可以打开package.jason这里面呢，我们在每次启动服务的时候可以加个刚刚false，这样我们也可以强制清理我们浏览器的这个缓存。另外呢，我们可以通过重新载入页面来实现浏览器端缓存的清理，比如我们这里可以重新的刷新一下页面，这样我们这个缓存也会重新的清理掉。至此，我们关于NPM依赖解析和预构建的全部内容就介绍完了，在下一章我们来学习V的模块热重载。