Live Note

Remain optimistic

Posted on Edited on In

Vite 为什么快？

Vite 的速度优势主要来源于其基于原生 ESM（ES Modules）的开发模式和高效的构建过程。

原生 ESM 的开发服务器

传统打包工具（如 Webpack）的问题

  • Webpack 在开发模式下会将所有模块打包成一个或多个 bundle 文件，即使只修改了一个文件，也需要重新打包整个 bundle。
  • 这种打包过程涉及大量的文件读取、解析、转换和写入操作，随着项目规模增加，启动时间和热更新时间会显著变慢。

Vite 的解决方案

  • Vite 利用现代浏览器对 原生 ES Modules（ESM） 的支持，在开发模式下不进行打包，而是直接通过 HTTP 请求按需加载模块。
  • 浏览器支持 <script type="module">，可以动态加载 ESM 模块，Vite 的开发服务器将源码直接以 ESM 格式提供给浏览器。
  • 启动速度快：
    • Vite 的开发服务器启动时，只需要初始化一个简单的 HTTP 服务器，无需预先打包整个项目。
    • 文件按需加载，只有访问到的模块才会被处理（例如解析和转换），大大减少了初始启动时间。
  • 按需编译：
    • Vite 使用 Esbuild（一个极快的 JavaScript/TS 编译器）对 TypeScript、JSX 等非标准 ESM 文件进行预编译，生成浏览器可识别的 ESM 格式。
    • Esbuild 的性能比传统工具（如 Babel）快 10-100 倍，因为它是基于 Go 语言实现的，充分利用了多核 CPU。
Read more »

Posted on Edited on In

:class 绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <h1 :class="['italic', 'red', {'active': flag}]">Test H1 Message</h1>
    <h1 :class="classObj">Test H1 Message</h1>
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    flag: true,
    classObj: { red: true, thin: true, italic: true, active: false },
  },
})
</script>
Read more »

Posted on Edited on In

computed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
    <input type="text" v-model="firstName">+
    <input type="text" v-model="lastName">=
    <input type="text" v-model="fullName">
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    firstName: "",
    lastName: "",
  },
  computed: {
    // 使用计算属性不需要()
    // 只要此function中使用的任何数据发生变化，就会重新计算值
    fullName: function () {
      return this.firstName + "-" + this.lastName
    },
  },
})
</script>
Read more »

Posted on Edited on In

filter

1
2
3
4
5
6
7
8
9
10
Vue.filter("msgFormat", function (msg, arg) {
  return msg.replace(/test/g, arg)
})
Vue.filter("test", function (msg) {
  return msg + "===="
})
var vm = new Vue({
  el: "#app",
  data: { msg: "test1 test2 test3" },
})
Read more »

Posted on Edited on

Waves