vitejs预构建的流程是什么

本文小编为大家详细介绍“vitejs预构建的流程是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“vitejs预构建的流程是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。简单来讲就是为了提高本地开发服务器的冷启动速度。按照vite的说法，当免费云主机域名冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。随着应用规模的增大，打包速度显著下降，本地服务器的启动速度也跟着变慢。为了加快本地开发服务器的启动速度，vite 引入了预构建机制。在预构建工具的选择上，vite选择了 esbuild 。esbuild 使用 Go 编写，比以 JavaScript 编写的打包器构建速度快 10-100 倍，有了预构建，再利用浏览器的esm方式按需加载业务代码，动态实时进行构建，结合缓存机制，大大提升了服务器的启动速度。如果是首次启动本地服务，那么vite会自动抓取源代码，从代码中找到需要预构建的依赖，最终对外返回类似下面的一个deps对象：具体实现就是，调用esbuild的build api，以index.html作为查找入口（entryPoints），将所有的来自node_modules以及在配置文件的optimizeDeps.include选项中指定的模块找出来。但是熟悉esbuild的小伙伴可能知道，esbuild默认支持的入口文件类型有js、ts、jsx、css、json、base64、dataurl、binary、file（.png等），并不包括html。vite是如何做到将index.html作为打包入口的呢？原因是vite自己实现了一个esbuild插件esbuildScanPlugin，来处理.vue和.html这种类型的文件。具体做法是读取html的内容，然后将里面的script提取到一个esm格式的js模块。由上文我们可知，来自node_modules中的模块依赖是需要预构建的。例如import ElementPlus from ‘element-plus’。因为在浏览器环境下，是不支持这种裸模块引用的（bare import）。另一方面，如果不进行构建，浏览器面对由成百上千的子模块组成的依赖，依靠原生esm的加载机制，每个的依赖的import都将产生一次http请求。面对大量的请求，浏览器是吃不消的。因此客观上需要对裸模块引入进行打包，并处理成浏览器环境下支持的相对路径或路径的导入方式。例如：import ElementPlus from ‘/path/to/.vite/element-plus/es/index.mjs’。在上一步，已经得到了需要预构建的依赖列表。现在需要把他们作为esbuild的entryPoints打包就行了。vite并没有将esbuild的outdir（构建产物的输出目录）直接配置为.vite目录，而是先将构建产物存放到了一个临时目录。当构建完成后，才将原来旧的.vite（如果有的话）删除。然后再将临时目录重命名为.vite。这样做主要是为了避免在程序运行过程中发生了错误，导致缓存不可用。以上就是预构建的主要处理流程。vite冷启动之所以快，除了esbuild本身构建速度够快外，也与vite做了必要的缓存机制密不可分。vite在预构建时，除了生成预构建的js文件外，还会创建一个_metadata.json文件，其结构大致如下：hash 是缓存的主要标识，由vite的配置文件和项目依赖决定（依赖的信息取自package-lock.json、yarn.lock、pnpm-lock.yaml）。 所以如果用户修改了vite.config.js或依赖发生了变化（依赖的添加删除更新会导致lock文件变化）都会令hash发生变化，缓存也就失效了。这时，vite需要重新进行预构建。当然如果手动删除了.vite缓存目录，也会重新构建。在vite启动时首先检查hash的值，如果当前的hash值与_metadata.json中的hash值相同，说明项目的依赖没有变化，无需重复构建了，直接使用缓存即可。读到这里，这篇“vitejs预构建的流程是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: go语言中泛型是的是什么

今天小编给大家分享的是go语言中泛型是的是什么，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。 在go语言中，泛型就是编写模板适应所有类型，只有在具体使用时才定义具体变量类型；通过引入类型形参和类型实参的…