构建系列之前端脚手架vite

江湖修行

已于 2023-04-21 10:23:09 修改

阅读量250

点赞数

分类专栏：大前端文章标签： vue.js 前端构建

于 2022-11-02 14:18:49 首次发布

本文链接：https://blog.csdn.net/jh1988abc/article/details/127634109

版权

大前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

本系列旨在总结现如今大前端的构建体系及覆盖各流程节点的工具链相关知识。

前言

前端技术整体还处于增长期，前端各技术框架的也卷着各位前端开发人员，本人最近新接触了一个vue项目，这是一个新的项目，项目的技术选型也比较追随当前技术潮流，比如工程的脚手架用的就是vite，于是就有了本篇文章，话不多说咱们直奔主题。

Vite简介

在前端脚手架的工具链上我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。

但随着我们项目的复杂度提升，代码量也越来越膨胀，在构建应用时，相应的工具需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

vite就是为解决上述问题而衍生的，也就是所谓的价值牵引，技术驱动的精髓所在。vite官网介绍其为下一代前端开发与构建工具，能显著提升前端开发体验。

Vite原理深入浅出

开发阶段

Vite 利用前端生态系统中的新技术解决上述问题，其利用原生 ES 模块和动态 ESM 模块，以便根据需要将代码注入浏览器。本质上，项目中的每次导入都会强制浏览器根据需要加载每个有效负载。这些导入将级联以获得特定情况下所需的所有代码。

此外，基于打包器启动时，重建整个包的效率很低。原因显而易见：因为这样更新速度会随着应用体积增长而直线下降。所以打包器支持了动态模块热替换（HMR）：允许一个模块 “热替换” 它自己，而不会影响页面其余部分。然而事与愿违，部分项目即使采用了 HMR 模式，其热更新速度也会随着应用规模的增长而显著下降。

在 Vite 中，HMR基于原生 ESM 上实现的。当更改一个文件时，Vite 只需要精确地使已更改的模块与其最近的 HMR 区域失效即可（寻找最小的dirty区域），使得无论应用大小如何，HMR 始终能保持快速更新。

Vite 同时利用其他一些浏览器支持的技术能力来加速整个页面的重新加载，比如源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存。

最终，Vite 的 HMR技术使你能够在开发时获得即时的启动速度，这会大大提高开发体验。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" 
          href="/vite.svg" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    **<script type="module" src="/src/main.js"></script>**
  </body>
</html>

main.js

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

createApp(App).mount('#app')

index.html是入口文件，当项目启动时它会将main.js文件作为原生 ES 模块发送到浏览器，让浏览器接管了打包程序的部分工作。

构建阶段

首先我们要明确vite在开发阶段并没有真正的打包项目，而是靠浏览器的打包能力完成应用启动的，但是在生产环境中我们需要考虑网络节点的覆盖能力，网络基础设施不同带来的网络带宽压力等等复杂情况，为了获得最佳的加载性能，我们还需要将代码进行编译和加载优化，比如 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存）。

所以vite提供了一套构建指令，它使用rollup(内置的打包程序)打开我们的代码，并且它是预配置的，可以输出生产环境的优化过的静态资源。

vue-config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    sourcemap: true,
    outDir: "public/build/"
  }
})

sourcemap和outDir都直接传递给 Rollup 进行配置。配置文件中的选项可以让开发人员在必要时对Rollup进行深入配置来实现不同场景下的业务需求。

实践

初始

第一步：npm create vite@latest
第二步：npm create vite@latest my-vue-app --template vue

Vite 项目中默认的 npm scripts

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

处理css、less、ts

新建css文件
只要html导入了就可以运行
新建less文件
只要npm install less -D安装一下就行了

新建ts文件
只要main.js导入这个ts了就可以运行

插件配置

新建vite.config.js

const vue = require(’@vitejs/plugin-vue’)//这是个函数且在node环境下所以用require
module.exports = {
    plugins:[
        vue()
    ]
}

打包

第一次vite启动项目时，vite会把使用的依赖集合起来放到node_module/.vite里下次再起项目时，不用从node_module里找，从而加快项目启动过程。

vite build 会对项目做打包，生成dist/文件夹。

总结

本文根据最近的vite学习实践进行了总结，对核心的技术原理深入浅出，后面有机会的话会进行深入分析和横向对比，敬请期待。

微信公众号同载：构建系列之前端脚手架vite。微信号搜：江湖修行，即可关注。欢迎欢迎强烈欢迎各位大佬关注。

江湖修行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
构建系列之前端脚手架vite

本文主要深入浅出的介绍了vite脚手架的原理和能力
复制链接

扫一扫

专栏目录