vite原理

鹿路陆
154 阅读2分钟

对于vite的理解，对比webpack

webpack原理

image.png

通过入口文件找到依赖，找到很多模块包括js、css和图片等。通过loader、plugin进行打包，形成打包文件bundle，这些文件是经过处理过的文件，开发过程中启动devServer服务器，访问开发服务器，就会把打包文件返回。

对于比较大的项目，打包起来就很慢，即使webpack有热替换，如果改动的文件有很多依赖，那么相关的依赖都会被重新打包，通过devServer返回给浏览器。

vite原理

image.png

对于vite，vite所做的工作很简单，核心就是不打包，按需引入依赖

  • 首先就是开启一个开发服务器，所展示的页面就是默认的index.html
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
   </html>

我们会发现，type="module"，浏览器可以使用模块化方式引入导出js文件，即可以使用import和export

  • index.html请求devServer服务器，获取/src/main.js文件，继续引入/src/main.js文件的依赖文件，这一步引入的文件都是经过vite的编译器处理的，如

    • main.js变化 - 路径变化

      源文件：

          import { createApp } from 'vue'
    import App from './App.vue'
    import './index.css'


    const app = createApp(App);
    console.log(app);
    app.mount('#app');

      经过处理的文件：

          import { createApp } from '/@modules/vue.js'
    import App from '/src/App.vue'
    import '/src/index.css?import'


    const app = createApp(App);
    console.log(app);
    app.mount('#app');

    • APP.vue

      image.png

文件的变化都可以通过控制台的网络通信看到，可以实际操作一下

webpack和vite的区别

  • webpack会先打包，然后启动开发服务器，请求服务器直接给予打包结果。而vite是直接启动开发服务器，请求哪个模块在对该模块进行实时编译。由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求，vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
  • 由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖，不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。在HMR方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的，相关依赖模块全部编译一次，效率更高。
  • 当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。另外，由于 vite利用的是ESModule，因此在代码中不可以使用Commonjs
avatar
文章
阅读
粉丝