【React工作记录七十五】react前端优化小结笔记

前端大歌谣

已于 2023-03-06 09:55:03 修改

阅读量162

点赞数

分类专栏：前端项目工作实战文章标签：前端 react.js javascript

于 2022-10-12 08:17:40 首次发布

本文链接：https://blog.csdn.net/geyaoisnice/article/details/127275198

版权

前端项目工作实战专栏收录该内容

143 篇文章 6 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了React前端项目的各种优化技巧，包括编译阶段的优化如webpack配置的include、resolve、alias、external、编译缓存和多进程，以及生产环境的tree-shaking、scope-hoisting和代码分割。此外，还提到了路由切换的优化如懒加载，更新阶段的PureComponent和不可变数据优化，以及可视化工具React Developer Tools的使用。文章还探讨了大数据渲染的虚拟列表和骨架屏技术，以及SEO优化的预渲染策略。

摘要由CSDN通过智能技术生成

编译阶段的优化

主要是webpack

开发环境时重复构建更快

1.include

缩小编译的范围
rules: [
	{
		test: /\.js$/,
		use: [
			{
				loader: 'babel-loader',
				options: {
					cacheDirectory: true,
					persets: [
						'@babel/preset-react'
					],
					plugins: [
						'@babel/plugin-proposal-class-properties'
					]
				}
			}
		],
		include: path.resovle('src'),
		exclude: /node_modules/
	}
]

2.resolve

配置解析
…
const bootstrap = path.resolve(“node_modules/boostrap/dist/css/bootstrap.css”)
…
resolve: {
modules: [path.resolve(‘node_modules’)] // 查找范围
extensions: [‘.js’, ‘.ts’], // 扩展名越