【一】尤大神都说Vite香，让我来手把手分析Vite原理

时间  2020-07-23 标签 一 尤 大 神 都说 vite 香 来手 把手 分析 vite 原理

一.什么是Vite？

法语Vite（轻量，轻快）vite 是一个基于 Vue3单文件组件的非打包开发服务器，它作到了本地快速开发启动、实现按需编译、再也不等待整个应用编译完成的功能做用。html

对于Vite的描述：针对Vue单页面组件的无打包开发服务器，能够直接在浏览器运行请求的vue文件。前端

面向现代浏览器，Vite基于原生模块系统 ESModule 实现了按需编译，而在webpack的开发环境却很慢，是由于其开发时须要将进行的编译放到内存中，打包全部文件。vue

Vite有如此多的优势，那么它是如何实现的呢？node

二.Vite的实现原理

咱们先来总结下Vite的实现原理：react

  • Vite在浏览器端使用的是 export import 方式导入和导出的模块；
  • vite同时实现了按需加载；
  • Vite高度依赖module script特性。

实现过程以下:webpack

  • 在 koa 中间件中获取请求 body；
  • 经过 es-module-lexer 解析资源 ast 并拿到 import 内容；
  • 判断 import 的资源是不是 npm 模块；
  • 返回处理后的资源路径： "vue" => "/@modules/vue"

将要处理的template,script,style等所需依赖以http请求的形式、经过query参数的形式区分，并加载SFC(vue单文件)文件各个模块内容。es6

接下来将本身手写一个Vite来实现相同的功能：web

三.手把手实现Vite

1.安装依赖

实现Vite的环境须要es-module-lexer、koa、koa-static、magic-string模块搭建：npm

npm install es-module-lexer koa koa-static magic-string
复制代码

这些模块的功能是：json

  • koa、 koa-static 是 vite内部使用的服务框架；
  • es-module-lexer 用于分析ES6 import语法；
  • magic-string 用来实现重写字符串内容。

2.基本结构搭建

Vite须要搭建一个koa服务：

const Koa = require('koa');
function createServer() {  const app = new Koa();  const root = process.cwd();  // 构建上下文对象  const context = {  app,  root  }  app.use((ctx, next) => {  // 扩展ctx属性  Object.assign(ctx, context);  return next();  });  const resolvedPlugins = [   ];  // 依次注册全部插件  resolvedPlugins.forEach(plugin => plugin(context));  return app; } createServer().listen(4000); 复制代码

3.Koa静态服务配置

用于处理项目中的静态资源：

const {serveStaticPlugin} = require('./serverPluginServeStatic');
const resolvedPlugins = [  serveStaticPlugin ]; 复制代码
const path = require('path');
function serveStaticPlugin({app,root}){  // 以当前根目录做为静态目录  app.use(require('koa-static')(root));  // 以public目录做为根目录  app.use(require('koa-static')(path.join(root,'public'))) } exports.serveStaticPlugin = serveStaticPlugin; 复制代码

目的是让当前目录下的文件和public目录下的文件能够直接被访问

4.重写模块路径

const {moduleRewritePlugin} = require('./serverPluginModuleRewrite');
const resolvedPlugins = [  moduleRewritePlugin,  serveStaticPlugin ]; 复制代码
const { readBody } = require("./utils");
const { parse } = require('es-module-lexer'); const MagicString = require('magic-string'); function rewriteImports(source) {  let imports = parse(source)[0];  const magicString = new MagicString(source);  if (imports.length) {  for (let i = 0; i < imports.length; i++) {  const { s, e } = imports[i];  let id = source.substring(s, e);  if (/^[^\/\.]/.test(id)) {  id = `/@modules/${id}`;  // 修改路径增长 /@modules 前缀  magicString.overwrite(s, e, id);  }  }  }  return magicString.toString(); } function moduleRewritePlugin({ app, root }) {  app.use(async (ctx, next) => {  await next();  // 对类型是js的文件进行拦截  if (ctx.body && ctx.response.is('js')) {  // 读取文件中的内容  const content = await readBody(ctx.body);  // 重写import中没法识别的路径  const r = rewriteImports(content);  ctx.body = r;  }  }); } exports.moduleRewritePlugin = moduleRewritePlugin; 复制代码

对js文件中的 import 语法进行路径的重写，改写后的路径会再次向服务器拦截请求

读取文件内容：

const { Readable } = require('stream')
async function readBody(stream) {  if (stream instanceof Readable) { //   return new Promise((resolve, reject) => {  let res = '';  stream  .on('data', (chunk) => res += chunk)  .on('end', () => resolve(res));  })  }else{  return stream.toString()  } } exports.readBody = readBody 复制代码

5.解析 /@modules 文件

const {moduleResolvePlugin} = require('./serverPluginModuleResolve');
const resolvedPlugins = [  moduleRewritePlugin,  moduleResolvePlugin,  serveStaticPlugin ]; 复制代码
const fs = require('fs').promises;
const path = require('path'); const { resolve } = require('path'); const moduleRE = /^\/@modules\//; const {resolveVue} = require('./utils') function moduleResolvePlugin({ app, root }) {  const vueResolved = resolveVue(root)  app.use(async (ctx, next) => {  // 对 /@modules 开头的路径进行映射  if(!moduleRE.test(ctx.path)){  return next();  }  // 去掉 /@modules/路径  const id = ctx.path.replace(moduleRE,'');  ctx.type = 'js';  const content = await fs.readFile(vueResolved[id],'utf8');  ctx.body = content  }); } exports.moduleResolvePlugin = moduleResolvePlugin; 复制代码

将/@modules 开头的路径解析成对应的真实文件，并返回给浏览器

const path = require('path');
function resolveVue(root) {  const compilerPkgPath = path.resolve(root, 'node_modules', '@vue/compiler-sfc/package.json');  const compilerPkg = require(compilerPkgPath);  // 编译模块的路径 node中编译  const compilerPath = path.join(path.dirname(compilerPkgPath), compilerPkg.main);  const resolvePath = (name) => path.resolve(root, 'node_modules', `@vue/${name}/dist/${name}.esm-bundler.js`);  // dom运行  const runtimeDomPath = resolvePath('runtime-dom')  // 核心运行  const runtimeCorePath = resolvePath('runtime-core')  // 响应式模块  const reactivityPath = resolvePath('reactivity')  // 共享模块  const sharedPath = resolvePath('shared')  return {  vue: runtimeDomPath,  '@vue/runtime-dom': runtimeDomPath,  '@vue/runtime-core': runtimeCorePath,  '@vue/reactivity': reactivityPath,  '@vue/shared': sharedPath,  compiler: compilerPath,  } } 复制代码

编译的模块使用commonjs规范,其余文件均使用es6模块

6.处理process的问题

浏览器中并无process变量，因此咱们须要在html中注入process变量

const {htmlRewritePlugin} = require('./serverPluginHtml');
const resolvedPlugins = [  htmlRewritePlugin,  moduleRewritePlugin,  moduleResolvePlugin,  serveStaticPlugin ]; 复制代码
const { readBody } = require("./utils");
function htmlRewritePlugin({root,app}){  const devInjection = `  <script>  window.process = {env:{NODE_ENV:'development'}}  </script>  `  app.use(async(ctx,next)=>{  await next();  if(ctx.response.is('html')){  const html = await readBody(ctx.body);  ctx.body = html.replace(/<head>/,`
const { readBody } = require("./utils");
function htmlRewritePlugin({root,app}){
    const devInjection = `
    <script>
        window.process = {env:{NODE_ENV:'development'}}
    </script>
    `
    app.use(async(ctx,next)=>{
        await next();
        if(ctx.response.is('html')){
            const html = await readBody(ctx.body);
            ctx.body = html.replace(/<head>/,`$&${devInjection}`)
        }
    })
}
exports.htmlRewritePlugin = htmlRewritePlugin
复制代码
amp;${devInjection}`)  }  }) } exports.htmlRewritePlugin = htmlRewritePlugin 复制代码const { readBody } = require("./utils");
function htmlRewritePlugin({root,app}){
    const devInjection = `
    <script>
        window.process = {env:{NODE_ENV:'development'}}
    </script>
    `
    app.use(async(ctx,next)=>{
        await next();
        if(ctx.response.is('html')){
            const html = await readBody(ctx.body);
            ctx.body = html.replace(/<head>/,`$&${devInjection}`)
        }
    })
}
exports.htmlRewritePlugin = htmlRewritePlugin
复制代码

在html的head标签中注入脚本

7.处理.vue后缀文件

const {vuePlugin} = require('./serverPluginVue')
const resolvedPlugins = [  htmlRewritePlugin,  moduleRewritePlugin,  moduleResolvePlugin,  vuePlugin,  serveStaticPlugin ]; 复制代码
const path = require('path');
const fs = require('fs').promises; const { resolveVue } = require('./utils'); const defaultExportRE = /((?:^|\n|;)\s*)export default/  function vuePlugin({ app, root }) {  app.use(async (ctx, next) => {  if (!ctx.path.endsWith('.vue')) {  return next();  }  // vue文件处理  const filePath = path.join(root, ctx.path);  const content = await fs.readFile(filePath, 'utf8');  // 获取文件内容  let { parse, compileTemplate } = require(resolveVue(root).compiler);  let { descriptor } = parse(content); // 解析文件内容  if (!ctx.query.type) {  let code = ``;  if (descriptor.script) {  let content = descriptor.script.content;  let replaced = content.replace(defaultExportRE, '$1const __script =');  code += replaced;  }  if (descriptor.template) {  const templateRequest = ctx.path + `?type=template`  code += `\nimport { render as __render } from ${JSON.stringify(  templateRequest  )}`;  code += `\n__script.render = __render`  }  ctx.type = 'js'  code += `\nexport default __script`;  ctx.body = code;  }  if (ctx.query.type == 'template') {  ctx.type = 'js';  let content = descriptor.template.content;  const { code } = compileTemplate({ source: content });  ctx.body = code;  }  }) } exports.vuePlugin = vuePlugin; 复制代码

在后端将.vue文件进行解析成以下结果

import {reactive} from '/@modules/vue';
const __script = {  setup() {  let state = reactive({count:0});  function click(){  state.count+= 1  }  return {  state,  click  }  } } import { render as __render } from "/src/App.vue?type=template" __script.render = __render export default __script 复制代码
import { toDisplayString as _toDisplayString, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "/@modules/vue"
 export function render(_ctx, _cache) {  return (_openBlock(), _createBlock(_Fragment, null, [  _createVNode("div", null, "计数器:" + _toDisplayString(_ctx.state.count), 1 /* TEXT */),  _createVNode("button", {  onClick: _cache[1] || (_cache[1] = $event => (_ctx.click($event)))  }, "+")  ], 64 /* STABLE_FRAGMENT */)) } 复制代码

解析后的结果能够直接在createApp方法中进行使用

8.小结

到这里，基本的一个Vite就实现了。总结一下就是：经过Koa服务，实现了按需读取文件，省掉了打包步骤，以此来提高项目启动速度，这中间包含了一系列的处理，诸如解析代码内容、静态文件读取、浏览器新特性实践等等。

其实Vite的内容远不止于此，这里咱们实现了非打包开发服务器，那它是如何作到热更新的呢，下次将手把手实现Vite热更新原理~

前端优选
欢迎关注【前端优选】公众号或添加我的VX:abcdarin1992，获取更多前端技能！

本文使用 mdnice 排版

联系我们 沪ICP备2021010478号-7