Commit fac07ace authored by 张芳利's avatar 张芳利

Update 浅谈Vite.md

parent 1c1dbda0
Pipeline #16180 canceled with stage
......@@ -34,7 +34,9 @@ Vite是一个由原生 ES Module 驱动的 Web 开发前端构建工具,它能
1. **打包和速度:**
webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖,然后进行打包,在启动webpack-dev-server,请求服务器时,直接显示打包结果。webpack打包之后存在的问题:随着模块的增多,会造成打出的 bundle 体积过大,进而会造成热更新速度明显拖慢。<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=)
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=)
vite: 启动服务器=> 请求模块时按需动态编译显示。是先启动开发服务器,请求某个模块时再对该模块进行实时编译,因为现代游览器本身支持ES-Module,所以会自动向依赖的Module发出请求。所以vite就将开发环境下的模块文件作为浏览器的执行文件,而不是像webpack进行打包后交给本地服务器。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22328960/1649906852732-e8b0df7d-cf10-4b82-b97c-755ae7cc32ec.png#clientId=u66ceec79-db7d-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u03b35c54&margin=%5Bobject%20Object%5D&name=image.png&originHeight=960&originWidth=1920&originalType=url&ratio=1&rotation=0&showTitle=false&size=155796&status=done&style=shadow&taskId=u4bf869fb-ed51-4bf9-8a67-0911a7031f8&title=)
......
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