Commit 0b65c167 authored by zhangfangli's avatar zhangfangli

浅谈vite

parents 67070e51 fac07ace
......@@ -34,8 +34,14 @@ Vite是一个由原生 ES Module 驱动的 Web 开发前端构建工具,它能
1. **打包和速度:**
<<<<<<< HEAD
webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖,然后进行打包,在启动webpack-dev-server,请求服务器时,直接显示打包结果。webpack打包之后存在的问题:随着模块的增多,会造成打出的 bundle 体积过大,进而会造成热更新速度明显拖慢。<br />
![webpack](/yifu-study-front-share/images/viteImg/webpack.png)
=======
webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖,然后进行打包,在启动webpack-dev-server,请求服务器时,直接显示打包结果。webpack打包之后存在的问题:随着模块的增多,会造成打出的 bundle 体积过大,进而会造成热更新速度明显拖慢。
<br />![](/yifu-study-front-share/images/a1.png)
<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1649906843938-e3f48703-d829-4552-8f60-94e9f6eda148.png#clientId=u66ceec79-db7d-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u271aea00&margin=%5Bobject%20Object%5D&name=image.png&originHeight=913&originWidth=1920&originalType=url&ratio=1&rotation=0&showTitle=false&size=144825&status=done&style=shadow&taskId=u69c1edc9-52b2-4ffe-bccf-ddae1305f22&title=)
>>>>>>> fac07ace42220e201c0464c6090ff807781db6ac
vite: 启动服务器=> 请求模块时按需动态编译显示。是先启动开发服务器,请求某个模块时再对该模块进行实时编译,因为现代游览器本身支持ES-Module,所以会自动向依赖的Module发出请求。所以vite就将开发环境下的模块文件作为浏览器的执行文件,而不是像webpack进行打包后交给本地服务器。<br />
![vite](/yifu-study-front-share/images/viteImg/vite1.png)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment