2024年前端最新如何在微前端中加载 Vite 应用？，一个三非渣本的前端校招秋招之路

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

• if (!isInIcestark()) {

• createApp(App).mount(‘#app’);

• }

• // 导出 mount 生命周期函数

• export function mount({ container }: { container: Element}) {

• vue = createApp(App);

• vue.mount(container);

• }

• // 导出 unmount 生命周期函数

• export function unmount() {

• if (vue) {

• vue.unmount();
  

• }

}

然而，在实际构建过程中，我们发现声明的函数并没有在脚本资源中导出。这是个非常疑惑的点，让我们深入到 Vite 的源码，并在内置的 vite:build-html 找寻到一些蛛丝马迹：

…

if (isModule) {

inlineModuleIndex++

if (url && !isExcludedUrl(url)) {

//

// add it as an import

js += \nimport ${JSON.stringify(url)}

shouldRemove = true

} else if (node.children.length) {

//

js += \nimport "${id}?html-proxy&index=${inlineModuleIndex}.js"

shouldRemove = true

}

}

…

Vite 默认使用 index.html 作为入口，在解析 index.html 的过程中，会生成一个虚拟的入口文件，将脚本资源通过 import 注入进来，也就是最终的入口文件实际上类似于下面的代码：

import ‘./src/main.ts’;

import ‘polyfill’;

面对这个场景，我们想到了两种解决方案：

• 借助 Vite Lib 模式，修改应用入口

// vite.config.ts

export default defineConfig({

…

build: {

lib: {

entry: ‘./src/main.ts’,

formats: [‘es’],

fileName: ‘index’

},

rollupOptions: {

preserveEntrySignatures: ‘exports-only’

}

},

})

这种方式有个明显的问题是：Vite 以 Lib 模式构建出的应用，其产物并不是一个完整的前端应用（缺少 index.html），无法满足独立运行的条件。

• 通过插件修改 Vite 的这一默认行为

通过 vite-plugin-index-html 插件，结合 Vite 的解析能力，将入口修改为静态资源的入口。

import htmlPlugin from ‘vite-plugin-index-html’;

// vite.config.ts

export default defineConfig({

plugins: [vue(), htmlPlugin({

input: ‘./src/main.ts’

})]

})

▐  ice.js Vite 模式

同时，icestark 也支持 ice.js Vite 模式快速接入。安装或升级 build-plugin-icestark 插件，在微应用 build.json 中配置：

{

• “vite”: true,

“plugins”: [

[“build-plugin-icestark”, {

“type”: “child”,

}]

]

}

即可得到正确导出生命周期函数的微应用。详细用法可参见 使用 ice.js Vite 模式。

▐  最终效果

你将得到什么

▐  渐进升级

为了解决时间上，长尾应用升级带来的效率问题，微前端通常是大型架构升级所选择的中间态（或终态）方案。因此在设计加载 ES modules 方案时，需要保持这一基准原则。

框架应用可以保持现有的构建方式不变（仍然可以使用 webpack 等非原生 ES modules 构建工具），亦无需对框架应用做任何构建上的改造。

因此，基本可以无痛尝试 Vite 所带来的快感，脚踏实地地，一点点地靠近远方。

▐  二次加载的极致体验

通过对 ES modules 原理的探寻，可以知道 ES modules 只执行一次。换成实际例子，也就是说当第二次执行相同的加载脚本时：

// icestark 第二次执行加载脚本

const { mount, unmout } = import(esModule);

浏览器不会重复执行 Construction -> Instantiation -> Evaluation 的流程，而是直接返回上次模块执行的结果。这会导致一些副作用的操作（比如在 Module Conext  下插入样式资源，脚本资源的行为，这给我们的微应用二次加载带来了额外的问题），同时也带来了极快的二次加载效果。

写在最后

建立在原生 ES modules 规范下的应用不会在短时间内快速铺开，很多 To C，To 商户的业务对浏览器的版本仍有限制。但是，icestark 在 2.x 快一年多的发展以来，仍希望覆盖到多样的开发场景，提供便捷、快速地业务升级。在支持传统 JS bundle、UMD 规范，本文分享了 icestark 在接入 ES modules 规范微应用的一些尝试，希望能给开发者带来一些新的选择和启发。

引用

1. icestark - 面向大型系统的微前端解决方案

2. proposal-dynamic-import

3. Vite - Next Generation Frontend Tooling

4. ES modules: A cartoon deep-dive

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】