javascript+vue3实践|青训营笔记

78 阅读4分钟

跟着老师所学的,今天课外主要学了一些COMMONJS和ESM 的内容,其实最主要的区别应该就是这两个的模块化方式稍有不同。Vite工具不就是在浏览器支持ES6之后,也就是浏览器支持ESM之后,然后在此基础上扩展的嘛,但是对于Vite工具内部,比如说HMR之类的,我目前不太了解,最近应该多看一些关于前端优化上的内容,比如说SSR,chunk分割,sprite,tree-shaking,Tree-shaking 是一种非常实用的优化技术,可以帮助开发人员自动删除未使用的代码,从而减少打包后的文件大小,提高页面的加载速度。Vite 工具默认开启了 Tree-shaking 技术,可以帮助开发人员自动删除未使用的代码。后期可以着重看一下chunk分割,sprite之类的,还需要加强自己读源码的能力。懒加载,目前我的理解就是不一次性渲染所有资源,等到某一时间触发时,再渲染某一资源之类的,路由懒加载应该也是一个意思,你过我不太清楚有了路由懒加载后,是否还有必要去再某个组件中特地懒加载,因为在我看来,路由懒加载已经在一定程度上优化性能了,Vite 本身不自带路由懒加载功能,需要使用路由库(如 Vue Router)来实现。

还有跨端跨平台开发,后续了解tauri和reactNative 在浏览器支持 ES 模块指的是浏览器原生支持 ECMAScript 6(ES6)规范中的模块化语法。ES6 的模块化语法可以让开发者将 JavaScript 代码按照功能划分为多个模块,从而提高代码的可维护性和复用性。

在 ES6 模块化语法中,每个模块都是一个独立的文件,可以通过 import 和 export 关键字来导入和导出模块中的变量、函数、类等内容。 先这样吧。 以下是chat对我的笔记的专业内容部分的完善: 您的理解基本上是正确的。COMMONJS 和 ESM 都是 JavaScript 的模块规范,但是使用方式略有不同,其中 ESM 是 ES6 引入的一种模块规范,在现代浏览器中得到了广泛支持。Vite 工具是一个基于现代浏览器支持的 ES6 模块系统构建的工具,可以实现快速的开发体验和优化性能。

关于 Vite 工具内部的一些概念,目前您的理解也基本上是正确的。HMR 是指热模块替换,是一种自动部署技术,可以在不重新加载整个页面的情况下,实时替换浏览器中的模块。Vite 工具默认启用了 HMR 功能,可以帮助开发人员快速进行开发和调试。

Tree-shaking 是一种优化技术,可以通过静态分析的方式,将未使用的代码从打包后的文件中删除,从而减小文件大小,提高加载速度。Vite 工具默认启用了 Tree-shaking,可以帮助开发人员自动删除未使用的代码。

除了 Tree-shaking 之外,Vite 工具还提供了一些其他的优化技术,如代码分割、懒加载、预加载等。代码分割可以将代码分为多个小块,从而实现更好的并行加载和缓存。懒加载可以将资源的加载延迟到需要的时候才进行,从而缩短页面的加载时间。预加载可以在页面加载完成后,提前加载未来可能需要的资源,从而提升用户体验。

路由懒加载是一种懒加载方式,可以将路由对应的组件在需要的时候才进行加载,从而减小初始加载时间。在使用路由懒加载的情况下,通常不需要在组件中再进行懒加载。Vite 工具默认支持路由懒加载,可以帮助开发人员快速实现优化。

最后,阅读源码确实是提高技术水平和解决问题的有效途径之一。对于一些优化和性能问题,阅读相关工具和库的源码可以帮助开发人员更好地理解其实现原理和运行机制。