这是我参与「第五届青训营」笔记创作活动的第8天。

前端构建工具

前端构建工具的意义
    模块化方案
        提供模块加载方案；
        兼容不同模块规范；
    语法转译
        高级语法转译，如Sass、TS等；
        资源加载，如图片、字体、worker；
    产物质量
        产物压缩、无用代码删除、语法降级；
    开发效率
        热更新；

Vite概述

定位：新一代前端构建工具；

两大组成部分
    No-bundle开发服务，源文件无需打包；
    生产环境基于Rollup的Bundler；
    
核心特征
    高性能，dev启动速度和热更新速度快；
    简单易用，开发者体验好；
    
内置的Web构建能力
    Vite开箱即用的功能等价于
        webpack；
        webpack-dev-serve;
        css-loader;
        less-loader;
        sass-loader;
        file-loader;
        HTMLWebpackPlugin;
        ......

Vite上手使用

Vite整体架构

关键技术：依赖预打包
    避免node-modules过多的文件请求；
    将CommonJS格式转换为ESM格式；
    服务器启动前扫描代码中用到的依赖；
    用Esbuild对依赖代码进行预打包；
    改写import语句，指定依赖为预构建产物路径；
    
关键技术：单文件编译
    用Esbuild编译TS/TSX;
    编译速度提升10-100x；
    不支持类型检查；
    不支持语法降级到ES5；
    
关键技术：插件机制
    开发阶段->模拟Rollup插件机制；
    生产环境->直接使用Rollup；

Vite插件开发