vue3.0+vite实战(一)

此文章先从如何使用再到vite与vue3.0基础特性

背景：项目技术选型倾向的原因，要尝试vue3.0，所以使用了“配套的vite”作为前端构建工具

创建web工程

yarn create @vitejs/app my-vue-app --template vue-ts

ps:node版本 >=12.0.0

目录结构

 这里的shims-vue.d.ts文件是告诉ts如何识别vue文件

观察下package.json文件，看看有哪些依赖

安装依赖

cnpm install

启动项目

npm run dev

启动成功之后效果

用法很简单，主要针对vite有哪些比webpack更强大得特性

核心：boundless

了解boundless之前先了解下webpack得构建模式

webpack

webpack通过入口文件，遍历整个依赖关系图，最终根据入口文件生成目标boundle.js，当项目体积越来越大得时候。整个构建过程变得越来越慢，通过一些方法可以提升这部分得效率，比如多线程构建，缓存，提取公共文件（每次构建避免构建这部分内容），利用这些方式可以加速构建速度，但也都有上限，当我们利用hot dev server热更新得时候，webpack得模式也是先构建然后再进行热更新。那么如何更优雅得解决这类问题，boundless解决方案能带来更好得开发体验

boundless解决方案直接跳过依赖构建得过程，使得浏览器直接加载目标文件，少了构建过程，解决了webpack在提升构建得整个过程中浪费得资源

boundless效果图

 boundless解决方案带来了好处：

1提升了构建过程，因为不需要构建了

2提升了项目启动时间，因为不需要构建了

3提升了文件编译速度，针对性得编译目标修改文件，提升了热更新的效率

4更高效的开发，代码跟踪，不在依赖source-map

具体得好处我们可以看下实际应用得体现

webpack

修改文件发生哪些变化（HMR）

 可以看到监听到文件变化后，仍然是先构建，然后浏览器在加载boundle文件

 

 vite (boundless方案)

修改文件观察变化

只重新编译了修改的目标文件

浏览器也只重新加载了目标文件。

到这里可以看到了boundless方案直观上的优势。采用这种方案的还有snowpack。

boundless如何实现

1.如今模块化大行其道，ES module成了主要趋势，所以我们可以基于ES module 做动态引入

<script type='module'>
      import d from '/demo.js'
      console.log(d) // 123
    </script>

 2.利用systemjs-importmap+system.import

<script type="systemjs-importmap">
    {
      "imports": {
        "COMMON": "http://localhost:3000/manifest.json"
      }
    }
  </script>

System.import(COMMON)

3 importmap

{
    "imports": {
      "demo": "./demo.js",
    }
  }

import a from 'demo'

 热更新只要本地启动dersever，本地文件相对路径生成映射的map.json文件，然后通过esmodule方式import目标文件就可以实现。具体怎么做，如何锁定更改文件，只load更改文件，挺难我不会。等我研究明白了再写。

optimize

这个概念在webpack4.0以后也是一个核心优化思想，起主要目的就是抽离公共文件，进而通过浏览器自带缓存提升页面体验，但是在vite中是干啥用的捏？

vite通过optimize自动将package.json文件中的depenencies借助rollup打包成ES model（rollup是打包工具，而且自带按需加载功能，最好了解一下rollup，官方文档也特意说明了vite对rollup的支持，Vite plugins extends Rollup's well-designed plugin interface with a few extra vite-specific option）

大致流程：vite(optimize) => package.json(depenencies)=>rollup打包=>写入.vue_opt_cache

打包也是有先来后到的，提前打包带来的好处除了能够提升页面的加载速度，借助 @rollup/plugin-commonjs 我们能够将 commonjs 的外部依赖打包为 ESModule 的形式引入，进一步扩大 Bundleless 的适用范围。

扩展功能：

vite专门提供了一个针对rollup插件的容器，同样也支持一些特定的钩子当这些钩子启用的时候会自动忽略rollup钩子

vite特定钩子

config

在解析配置之前设置一些plugin来修改vite的配置，或者获获取构建过程中的一些信息，其实就是webpack的自定义plugin，这个过程中拿到compiler跟compiltion信息在做特性修改

configResolved

解析之后vite之后做修改，与config类似，只是针对的vite构建时间点不同进行取舍

configureServer

用于配置开发服务器的钩子。主要是自定义中间件，中间件可以在vite自身内部中间件中间运行，也可以在vite中间件结束运行。

transformIndexHtml

转换html专用的钩子，针对输出的html做特定修改。

handleHotUpdate

自定义热更新的处理规则

本菜鸡目前大概了解这些，到这里会有疑问，既然没有构建过程，怎么部署？不妨执行下vite build看下效果，其实boundless只是针对提高开发的体验，真正部署的时候还是遵循整体构建流程~

初步了解vite的boundless，待详细研究过在做补充，下一篇总结vue3.0特性以及结合ts。