前端最强优化

优化大概方案

优化策略：减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式

• 合并、压缩、混淆html/css/js文件（webpack实现，减小资源大小）
• Nginx开启Gzip，进一步压缩资源（减小资源大小）
• 图片资源使用CDN加速（提高加载速度）
• 符合条件的图标做base64处理（减小资源大小）
• 样式表放首部，JS放尾部（JS单线程，会阻塞页面；资源加载方式）
• 设置缓存（强缓存和协商缓存，提高加载速度）
• link或者src添加rel属性，设置prefetch或preload可预加载资源。（加载时机）
• 如果使用了UI组件库，采用按需加载（减小资源大小）
• SPA项目，通过import或者require做路由按需（减小资源大小）
• 服务端渲染SSR，加快首屏渲染，利于SEO
• 页面使用骨架屏，提高首页加载速度（提高加载速度）
• 使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显
• 使用图片懒加载-lazyload

vue 优化

• 合理是有v-if，v-show
• 使用computed（缓存）
• keep-active
• destroy销毁自定义事件，自定义监听，定时器
• 组件、路由懒加载

webpack优化

优化构建速度：

• output: contentHash，内容不变就不重新打包
• [‘babel-loader?cacheDirectory’] 给babel-loader加缓存，只要es6代码没改，不需要重新编译
• include、exclude确定范围
• IgnorePlugin直接不引入，代码中没有
• HappyPack：开启多进程打包(项目较小反而会因为进程的启动销毁等开销而变慢)

module:{
	rules:[
		{
			test:/\.js$/,
			use:['happypack/loader?id=babel']
		}
	]
},
plugins: [
	new HappyPack({
		id:'babel',
		loaders:['babel-loader?cacheDirectory']
	})
]

• webpack-dev-server自带自动刷新（全局刷新比较慢，状态路由丢失）
• 热更新（无感更新，状态不丢失）
  hot-module-replacement-plugin

优化产出代码：

• production模式内置tree-shakeing，uglify，删除警告代码等
• url-loader：小图片用base64加载
• min-css-extract-plugin: 抽离css，不再使用style-loader
• bundle 加 contentHash，内容不变就不重新打包
• IgnorePlugin直接不引入，代码中没有
• noParse引入，但不打包
• 懒加载
• 压缩css：

optimization:{
	minimizer:[
		new TerserJSPlugin({}),
		new OptimizeCSSAssetsPlugin()
	]
}

• 提取公共js或不怎么变更的js

optimization:{
	// 分割代码块
	splitChunks:{
		chunks:'all',
		cacheGroups:{
			vendor:{
				name:'vendor',
				priorty: 1, // 权限越大越高
				test: /node_modules/, 
				minsize: 5kb, // 大小限制
				minchunks:1  // 最少复用过几次
			},
			common:{
				name:'common',
				priorty: 0, // 权限越大越高
				minsize: 5kb, // 大小限制
				minchunks:2  // 最少复用过几次
			}
		}
	}
}

• ParallelUglifyPlugin 多进程压缩
  配置是否删除console，debuger，注释，有些简单定义变量的编译
• Scope Hosting
  var a=1
  var b=2
  var c=a+b
  => var c = 3
• CDN加速