webpack3

缓存

1. 目的： 提升二次构建速度
2. 思路

• babel-loader开启缓存
• terser-webpack-plugin开启缓存‘
• 使用cache-loader或者hard-source-webpack-plugin

缩小构建目标

1. 目的：尽可能的少构建模块(比如：babel-loader不解析node_modules)
2. 代码示例

module.exports = {
	rules:{
	test:/.js$/,
		loader:'happypack/loader',
		exclude:'node_modules'  //exclude 不解析
	}
}

减少文件搜索范围

1. 优化resolve.modules配置（减少模块搜索层级）
2. 优化resolve.mainFields配置
3. 优化resolve.extensions配置
4. 合理使用 alias

module.exports = {
	resolve:{
		alias:{
			react:path.resolve(__dirname,'./node_modules/react/dist/react.min.js'),
		},
		modules:[path.resolve(__dirname,'node_modules')],
		extensions:['.js'],
		mainFields:['main']
	}
}

tree-shaking 擦除无用的js和css

1. purifycss 删除无用css代码
2. purgecss-webpack-plugin 配合 mini-css-extract-plugin使用

图片压缩

1. 要求：基于nodejs库的 imagemin或者tinypng API
2. 使用：配置 image-webpack-loader

{
	test:/\.(png|svg|jpg|gif|blob)$/,
	use:[
		{
			loader:'file-loader',
			options:{
				name:`${filename}img/[name]${hash}.[ext]`,
			}
		},
		{
			loader:'image-webpack-loader',
			options:{
				mozjpeg:{
					progressive:true,
					qulity:65
				},
				optipng:{
					enabled:false
				},
				pngquant:{
					quality:'65-90',
					speed:4
				},
				gifsicle:{
					interlaced:false
				},
				webp:{
					quality:75
				}
			}
		}
	]
}

3. 使用imagemin的优点分析
4. 有很多定制选项
5. 可以引入更多第三方优化插件，例如pngquant
6. 可以处理多种图片格式

polyfill service原理

• 识别User Agent 下发不同的 polyfill
• 构建体积优化， 如何使用动态polyfill service。

//polyfill.io官方提供的服务
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
//基于官方自建polyfill服务
//huayang.qq.com/polyfill_service/v2/polyfill.min.js?unknown=polyfill&feactures=Promise,Map,Set