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

编译阶段的优化

主要是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’], // 扩展 名 越少越好
alias: {
bootstrap
},
fallback: {
cryto: false, // 假如说你引用的一个包里面有node核心模块 它会帮你跳过这个node核心模块的引用 让你最后打出来的包体积更小
buffer: false,
stream: false