网站建设与运营在线考试,营销型网站整体优化,手机商城系统制作,企查查企业信用查询官网目录 1#xff0c;webpack 的流程2#xff0c;Vite 的流程简单编译 3#xff0c;总结 主要对比开发阶段。
1#xff0c;webpack 的流程 开发阶段大致流程#xff1a;指定一个入口文件#xff0c;对相关的模块#xff08;js css img 等#xff09;先进行打包#xff0… 目录 1webpack 的流程2Vite 的流程简单编译 3总结 主要对比开发阶段。
1webpack 的流程 开发阶段大致流程指定一个入口文件对相关的模块js css img 等先进行打包接着启动一个开发服务器浏览器请求时返回打包后的文件。 这样做的特点是
如果项目比较大依赖项比较多打包速度会降低会影响到启动速度。热更新时被修改模块所依赖的其他模块都会重新打包。
以 vue-cli 创建的项目为例
初次打包时间 3866ms 二次打包 1733ms 2Vite 的流程 并不会先打包文件而是直接启动开发服务器使用的 koa所以无论项目多大启动速度都不太会受到影响。
以 Vite 创建的项目为例虽然现在看和 webpack 的差距没有很大但项目越大越明显
初次打包 二次打包 Vite 拿到所有的资源的步骤如下
当访问服务器地址时会请求 index.html。
!doctype html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/html注意到 script 使用了 typemodule所以浏览器会自动请求对应的模块 main.js由开发服务器返回。
// main.js 源代码
import { createApp } from vue
import ./style.css
import App from ./App.vuecreateApp(App).mount(#app)在 main.js 中引入的模块浏览器又会自动请求vuestyle.cssApp.vue以此类推。 注意在开发阶段虽然 Vite 比 webpack 发送的请求还多但这是在本地发送的请求速度极快至少比 webpack 打包的速度快。 简单编译
值得注意的是开发服务器会对请求的内容做一些简单的编译后返回比如
js 文件会对路径做变化。这样做的目的是方便开发服务器寻找对应的内容。 2css 文件会将 css 编译为字符串并将 css 文件处理为 ESModule 的形式。 3vue 组件也编译为纯 js并且还是 ESModule 。
同时该组件中还会再次请求带后缀的同名 vue 文件这是 vue 编译 css 的结果。 3总结 webpack 会先打包再启动开发服务器浏览器请求服务器时直接返回打包结果。 vite 是直接启动开发服务器浏览器请求哪个模块再对该模块进行实时编译。 由于现代浏览器本身就支持 ES Module会自动向依赖的 Module 发出请求。而vite充分利用这一点将开发环境下的模块文件作为浏览器要执行的文件所以 vite 项目中不可以使用 CommonJS而不是像 webpack 那样进行打包合并。 由于 vite 在启动的时候不需要打包也就意味着不需要分析模块的依赖、不需要编译因此启动速度非常快。 当浏览器请求某个模块时再根据需要对模块内容进行编译。这种按需动态编译的方式极大的缩减了编译时间项目越复杂、模块越多vite的优势越明显。 在HMR方面vite 在改动了一个模块后仅需让浏览器重新请求该模块即可不像 webpack 那样需要把该模块的相关依赖模块全部编译一次效率更高。 当需要打包到生产环境时vite 使用传统的 rollup 打包因此 vite 的主要优势在开发阶段。 以上。
