下一代前端构建工具+Vite+实践与探索-张毅.pdf

下一代构建工具 Vite实践与探索张毅关于我• 张毅，华为技术有限公司 / 开源能力中心• Vue 社区 Member• Vite 社区 Collaborator• Vue Shenzhen Meetup 发起人•Vite 原理与关键技术•Vite 项目实战•Vite 插件生态•Vite Module Federation 探索目录• 开发环境：• No-Bundle 开发服务器• 生产构建：• 预配置的 Rollup 打包命令，针对生产环境高度优化• 以及…• HMR 热更新• 依赖预构建• 内置 SSR 支持下一代前端开发与构建工具Vite (法语意为 "快速的"，发音 /vit/)Vite 是什么？$ npm create vite$ vite $ vite buildViteSnowpackWebpack开发环境No-Bundle (CJS→ESM)No-Bundle (CJS→ESM)Bundle (CJS/UMD/ESM)生产构建Rollup可选Webpack/Rollup/ESBuildWebpack插件生态★★★★☆★★★☆☆★★★★★易用性★★★★★★★★★☆★★★★☆dev 启动速度快快慢（项目规模越大越慢）npm 月下载量1085.63K+19.05%36.59K-19.08%71.94M+1.66%Git Star32.61k19.41k59.57k• It is NOT Vite’s goal to completely replace webpack !• 目前 Snowpack 作者已将其交给社区维护，新项目 Astro 也迁移至 Vite与 Snowpack、Webpack 对比Vite 生态进展2020.4initial commit2020.112021.2NowV1.0V2.0V2.6.xVite 到底有多快? – 业界案例• 开发速度快！• HMR 热更新快！• 资源占用少！From Hacker News:Create React App (webpack) vs Vite (esbuild) on Replit containers:- 1 second start up time on Vite vs 15 seconds for CRA- React.js hello world project is 234mb on CRA and only 34mb on Vite- 1GB RAM for Vite dev server vs 3GB+ for CRA•冷启动时间 2m15s -> 1.7s•热启动时间 < 300ms•热更新时间 <100ms•甚至需要专门的插件•内存占用从 3GB 减少到 1GB•磁盘占用从 234M 减少到 34MVite 到底有多快? – 实测数据项目代码规模构建工具Dev启动页面加载时间HMRV***10kVue Cli10.5s0.9s13sVite0.6s0.8s0.02sSE***80kVue Cli26.8s0.5s1sVite1.1s1.2s0.017sKi***100kVue Cli278s0.9s3.5sVite3.4s1.6s0.03sWe***148kWebpack142s5.8s14sVite6.1s8.6s0.42s我们迁移了 20+ 项目，一些测试数据：迁移至 Vite 可获得 10~100 倍的启动性能提升，即时的模块热更新响应。Vite 为什么快？Vite 设计基于 2 个趋势：1) ES Modules 广泛支持• 原⽣ ES modules 已有 93.71% 的浏览器⽀持率• Internet Explorer 11 将于 2022 年 6 月 15 日停用并停止支持Vite 设计基于2个趋势：2) 高性能语言重写 CompileresbuildA super-fast compiler written in rustAn extremely fast JavaScript bundlerFor most users, most important test result is parallel benchmark.A ground up rewrite of our JavaScript compiler in Rust, which improves overall build performance by up to 10x.https://v2.parceljs.org/blog/beta3/https://rome.tools/blog/2021/09/21/rome-will-be-rewritten-in-rustdesigned to replace Babel, ESLint, webpack, Prettier, Jest.Vite 核心原理 - No-Bundleimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')import { createApp } from "/node_modules/.vite/vue.js?v=b2be7c94";import App from "/src/App.vue";createApp(App).mount("#app");main.ts 源文件Vite 转换后 入口 index.htmlRequest URL: http://localhost:3000/src/main.tsNo-Bundle 带来的优缺点• 优势：• 快！⚡• ESM 标准兼容• 带来的问题：• 请求数量增多• Dev 和生产不一致• 部分依赖不提供 ESM•Vite 原理与关键技术•Vite 项目实战•Vite 插件生态•Vite Module Federation 探索目录Webpack 迁移 Vite 实践一键迁移工具 webpack-to-vite� 项目地址：https://github.com/originjs/webpack-to-vite� 使用方式：•npx @originjs/webpack-to-vite -d Vite 使用常见问题 – CommonJS 的挑战• 社区 225+ issue (占比8.6%)• dev 环境：� src 源码，手工修改为 ESM� node_modules：optimizeDeps.include� 使用插件 @originjs/vite-plugin-commonjs• 生产构建：� Vite 默认使用 @rollup/plugin-commonjs� 配置 build.commonjsOptions，例如：transformMixedEsModulesconst obj = require('./file.js');module.exports = { obj};import obj from './file.js'export default { obj};CJSESMVite 使用常见问题 – 浏览器兼容• dev 开发环境依赖 ESM，但 build 打包仍可兼容 IE11• @vitejs/plugin-legacy• 原理：� 使用@babel/preset-env� SystemJS 格式� � 文件后缀必须是 .jsx• Typescript 兼容� esbuild 只做转译，不执行类型检查� 每个文件独立编译 isolatedModules• Node built-ins� Vite will not support (same as webpack5)Vite 优化 – 生产构建体积优化• 使用插件 rollup-plugin-visualizer• build.rollupOptions.external• Code Splitting� 利用好 dynamic import• CSS 按需加载� vite-plugin-style-importimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { visualizer } from 'rollup-plugin-visualizer';export default defineConfig({ plugins: [ vue() ], build: { rollupOptions: { plugins: [ visualizer( ) ], external:['vue'] } }})Vite 优化 – 生产构建速度优化• 主要是针对 rollup 的优化• build.rollupOptions.external↓16.5s• build.commonjsOptions.sourceMap -> false↓0.5s• build.brotliSize -> false↓0.3s• build.minify -> `esbuild` 2.6.0默认↓6.2s (20~40x fast)整体构建时间可从 29.8s 优化至 6.3，降低 79%是时候迁移到 Vite 了吗？•Vite 原理与关键技术•Vite 项目实战•Vite 插件生态•Vite Module Federation 探索目录Vite 插件生态https://github.com/vitejs/awesome-vitehttps://vite-rollup-plugins.patak.devVite 常用插件• @vitejs/plugin-vue / @vite-plugin-vue2� Vue 3 / Vue 2 支持• @vitejs/plugin-legacy� 传统浏览器兼容支持• @vitejs/plugin-vue-jsx� 提供 Vue 3 JSX 支持• @vitejs/plugin-react� react 支持Vite 插件开发实践(1)Vite 独有钩子Rollup 通用钩子configResolved解析 Vite 配置完成config解析 Vite 配置前配置阶段转换阶段optionsRollup配置阶段resolveId解析一个依赖load加载文件构建结束buildEnd构建结束closeBundle写入bundel文件解析 Vite 配置buildStart开始Rollup构建transform转换模块构建启动build构建configResolved解析 Vite 配置完成config解析 Vite 配置前配置阶段请求转换configureServer配置开发服务器optionsRollup参数配置resolveId解析一个依赖transformIndexHtmlindex.html专用钩子handleHotUpdate执行自定义HMR更新load加载文件解析 Vite 配置buildStart预构建启动transform转换模块dev服务器启动dev开发Vite 插件接口基于 Rollup 进行扩展：Vite 插件开发实践(2)•执行顺序�通过 enforce 属性调整�插件按照以下顺序执行：• Alias• 带有 enforce: 'pre' 的用户插件• Vite 核心插件• 没有 enforce 值的用户插件• Vite 构建用的插件• 带有 enforce: 'post' 的用户插件• Vite...