「前端」性能优化问题总结

前言

本文主要介绍一些前端通用的性能优化方案总结，非写代码阶段的性能优化。

分包

React router V6.4

数据路由新特性

<Route path='/xx' lazy={async()=>{
	const module = await import('./xx')
	const XX = module.default
	return{
		element:(
			<Suspense fallback={<div>loading...</div>}>
				<XX />
			</Suspense>
)
}
}}
</Route>

从 父组件渲染加载异步子组件 -> JS 包下载 -> 子组件加载

优化为 ->

父组件渲染加载异步子组件 & JS 包下载 -> 子组件加载

模块联邦

webpack5 特性

webpack官方解释： 多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。

模块联邦可以在多个 webpack 编译产物之间共享模块、依赖、页面甚至应用，通过全局变量的组合，还可以在不同模块之前进行数据的获取，让跨应用间做到模块共享真正的插拔式的便捷使用。比如a应用如果想使用b应用中table的组件，通过模块联邦可以直接在a中进行import(‘b/table’)非常的方便。

注： 多个 webpack 构建一起工作，从运行时的角度来看，多个构建的模块将表现得像一个巨大的连接模块图。 从开发者的角度来看，模块可以从指定的远程构建中导入，并以最小的限制来使用。可以理解为一种解决应用集的方案， 每个构建都充当一个容器，也可将其他构建作为容器。通过这种方式，每个构建都能够通过从对应容器中加载模块来访问其他容器暴露出来的模块。

线上 Runtime(运行时) 的效果，让代码直接在项目间利用 CDN 直接共享，不再需要本地安装npm 包、构建再发布了。

简单来说，我可以将自己的模块共享出去，也可以使用其他项目的模块。

这通常被称为微前端，例如single-spa，qiankun，但是模块联邦远不止如此。

demo:

https://github.com/yangzi0210/Webpack_learning

其中的module_federation分支

构建优化

• webpack
  • https://juejin.cn/post/6844904142675279886
  • https://juejin.cn/post/7244819106342780988
• vite
  • https://juejin.cn/post/7232688124416458789
  • https://juejin.cn/post/7176046988247433275
  • https://juejin.cn/post/7256723839941476412