vite

文末福利资源更新 本文将重点介绍4个可以用来提高页面渲染速度的CSS技巧。 1. Content-visibility 一般来说，大多数Web应用都有复杂的UI元素，它的扩展范围超出了用户在浏览器视图中看到的内容。在这种情况下，我们可以使用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。如果你有大量的离屏内容，这将大大减少页面渲染时间。 这个功能是最新增加的功能之一，也是对提高渲染性能影响最大的功能之一。虽然 content-visibility 接受几个值，但我们可以在元素上使用 content-visibility: auto; 来获得直接的性能提升。 让我们考虑一下下面的页面，其中包含许多不同信息的卡片。虽然大约有12张卡适合屏幕，但列表中大约有375张卡。正如你所看到的，浏览器用了1037ms来渲染这个页面 。 下一步，您可以向所有卡添加 content-visibility 。 在这个例子中，在页面中加入 content-visibility 后，渲染时间下降到150ms，这是6倍以上的性能提升。 正如你所看到的，内容可见性是相当强大的，对提高页面渲染时间非常有用。根据我们目前所讨论的东西，你一定是把它当成了页面渲染的银弹。 content-visibility 的限制 然而，有几个领域的内容可视性不佳。我想强调两点，供大家参考。

原文链接: vite2 vue3-ts 添加router, vuex和alias 安装 yarn add vue-router@4 yarn add vuex@next https://next.vuex.vuejs.org/installation.html https://github.com/vuejs/vue-router-next https://next.router.vuejs.org/ https://next.vuex.vuejs.org/installation.html vuex store import { createStore } from "vuex"; const defaultState = { count: 0, }; const store = createStore({ state() { return defaultState; }, mutations: { increment(state: typeof defaultState) { state.count++; }, }, getters: { double(state: typeof defaultState) { return 2 * state.count; }, }, }); export default store; app.vue <template> <el

在上篇文章 《2021新年 Vue3.0 + Element UI 尝鲜小记》 里，我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目，而 Vue CLI 实际上为我们生成了一个我们熟悉的 Webpack 工程项目。 Webpack 无需过多介绍，一个十分强大的打包工具。但 Webpack 也有不足的地方，比如第一次打包需要很长时间，修改代码之后的热更新速度较慢。 随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器，基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具，恰恰就解决了上述 Webpack 的痛点。Vite 主要的优势有三点： 快速冷启动服务器 即时热模块更换（HMR） 真正的按需编译 听上去就很不错，立刻上手尝试一下。 初始化 Vite 项目 使用 npm init @vitejs/app my-vue-app --template vue 命令快速生成一个使用 Vite 构建的 Vue 3 项目模版。 运行 npm run dev 即可把项目跑起来，进入开发模式。项目冷启动速度非常快，不到 1 秒钟，浏览器里就已经出现项目预览了。项目冷启动只用了 382ms ，真香。 引入 Element Plus UI 组件库 开发项目，首先要挑选一个 UI 组件库。目前市面上支持 Vue

阿里妹导读： Webpack 将各个资源打包整合在一起形成 bundle，当资源越来越多时，打包的过程也将越来越慢。如果我们不需要打包呢？让浏览器 直 接 加载对应的资源，是否就可以实现质的提升 ？ 本文分享基于浏览器的 ESModule 能力实现 Bundless 本地开发的相关思路、核心技术点和 Vite 的相关实现，以及在阿里供应链 POS 场景下的落地实践。 文末福利：前端开发学习路线。 一 引言 Webpack 最初是为了解决前端模块化以及使用 Node.Js 生态的问题而出现，在过去的 8 年时间里，Webpack 的能力越来越强大。 但因为多了打包构建这一层，随着项目的增长，打包构建速度越来越慢，每次启动都要等待几十秒甚至几分钟，然后启动一轮构建优化，随着项目的进一步增大，构建速度又会降低，陷入不断优化的循环。 在项目达到一定的规模时，基于 Bundle 的构建优化的收益变得越来越有限，无法实现质的提升。我们从另一个角度思考，webpack 之所以慢，主要的原因还是在于他将各个资源打包整合在一起形成 bundle，如果我们不需要 bundle 打包的过程，直接让浏览器去加载对应的资源，我们将有可能可以跳出这个循环，实现质的提升。 在 Bundleless 的架构下，我们不再需要构建一个完整的 bundle，同时在修改文件时，浏览器也只需要重新加载单个文件即可

搭建项目脚手架工程 是 架构师必需必会的基础技能 。 在脚手架的帮助下，我们只需要跑一个命令就可以生成一个项目，不需要再思考项目的目录结构，单元测试，所需要的依赖等繁琐的事情。 虽然脚手架一般只用于前端工作流中项目的起始阶段，而且由于“用后即弃”的性质，并不被前端工程化领域所重视。但 随着前端工程体系越来越复杂，脚手架的重要性却在逐渐突出。 引用 《前端工程化：体系设计与实践》 书里的一段话：“前端工程体系的功能涵盖范围广，封装的方案类型多，对应的配置项也非常复杂。对于多数业务开发者来说，他们不需要了解其中的复杂原理，只需要知道如何配置即可。” 这就要求脚手架能够快速开发快速配置，将非必要的工程化体系的技术细节封装到一个黑盒中，把一线业务开发人员从不必要的工程体系相关繁琐的工作开发任务隔离开来，提高相关业务人员关注的业务本身，提高专注性，提高生产效率。 轻松构建你自己的脚手架 我们熟知的vue-cli，create-react-app都是前端圈最知名、最流行、最大众化的脚手架工具，但是实际工作的时候，常常会有凭现有工具无法满足的复杂需求。 这就需要我们掌握快速开发自己的脚手架工具的能力。 在这里给大家推荐一套视频教程—— 《从0到1用Node完成一个CLI工具》 帮助你： 从零构建一个Cli工具 command命令行 模板库代码拉取 Vue约定路由功能 npm库发布

一 引言 Webpack 最初是为了解决前端模块化以及使用 Node.Js 生态的问题而出现，在过去的 8 年时间里，Webpack 的能力越来越强大。 但因为多了打包构建这一层，随着项目的增长，打包构建速度越来越慢，每次启动都要等待几十秒甚至几分钟，然后启动一轮构建优化，随着项目的进一步增大，构建速度又会降低，陷入不断优化的循环。 在项目达到一定的规模时，基于 Bundle 的构建优化的收益变得越来越有限，无法实现质的提升。我们从另一个角度思考，webpack 之所以慢，主要的原因还是在于他将各个资源打包整合在一起形成 bundle，如果我们不需要 bundle 打包的过程，直接让浏览器去加载对应的资源，我们将有可能可以跳出这个循环，实现质的提升。 在 Bundleless 的架构下，我们不再需要构建一个完整的 bundle，同时在修改文件时，浏览器也只需要重新加载单个文件即可。由于没有了构建这一层我们将能够实现以下的目标： 极快的本地启动速度，只需要启动本地服务。 极快的代码编译速度，每次只需要处理单个文件。 项目开发构建的时间复杂度始终为 O(1)，使得项目能够持续保持高效的构建。 更加简单的调试体验，不再强依赖 sourcemaps 即可实现稳定的单文件的 debug。 基于以上的可能性 Bundleless 将重新定义前端的本地开发，让我们重新找回前端在 10

前言 在4月21日晚，Vue作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。 里面尤大大所提到他最近在做的这个小工具 vite ,一个实验性的no build的vue开发服务器。(这个小工具可以支持热更新,且不用预编译) 一丶安装 命令行复制以下 mkdir vue-vite 新建文件夹 npm init - y 初始化项目 npm i vite - g 全局安装vite npm i vue@next 安装vue3.0 beta版 二丶新建文件 在项目目录下新建 一下文件 index.html <div id= " app " ></div> <script type= " module " > import { createApp } from ' vue ' import Comp from ' ./Comp.vue ' createApp(Comp).mount( ' #app ' ) </script> Comp.vue <template> <button @click= " count++ " >{{ count }}</button> </template> <script> export default { data: () => ({ count: 0 }) } </script> <style scoped> button { color:

当谈到前端构建工具，就不得不提的功能强大的 Webpack , 尤其是在最新版本中提出了 Module Federation 功能，该功能进一步增强了 Webpack 的实际作用。我相信凭借 Webpack 这几年的积累，恐怕未来几年内没有哪一个打包工具能够与之媲美，但是这并不妨碍我们探讨一下新的工具 Snowpack 。 现代打包工具的问题 使用 Snowpack，当您构建现代的 Web 应用程序（使用React，Vue等），无需使用类似于 Webpack，Parcel 和 Rollup 等打包工具。每次您点击保存时，都无需等待打包程序重新构建。相反，所有的文件更改都会立即反映在浏览器中。 请关注立即这个词语, bundleless ? 这个究竟有什么意义？为什么我会这么重点关注这一个工具。 对于一些项目与开发者而言，可能对此没有太大的感触，但是对于我来说，开发中打包曾经是一个噩梦。几年前，我从头开发一个前端 Sass 项目，该项目开始时候就使用 Vue 以 Webpack 根据业务线构建多页面。几个月的时间过去，模块有了十几个。当我修改一个很小的地方时候，需要近一分钟的时候才能热更新完成。当时，我们只能在项目开启的时候设置那些页面需要编译。在忍受了一周后，我们不得不开始拆分项目，因为开发人员和项目开发效率的原因，我们不可能根据业务拆分项目