页面编译渲染阶段
1、减少http请求,webpack设置url-loader,设置limit对于小容量图片转换成base64位图片,为什么不对所有图片使用转换是因为容量较大的图片转换成base64位体积会成倍的增加,违反性能优化的初衷;合并多个小型功能性图片,变成css spirit(雪碧图),减少http图片资源对于服务器的请求;
2、减少重绘回流,特别是回流,回流对于页面有比较大的性能损耗,减少无意义的html的标签的深度嵌套,动画特效可以使用css3特效。
3、压缩图片,通过配置image-webpack-loader不失真压缩图片。
4、页面访问路由时对路由设置按需加载,以vue为例,用route异步import引入的方式。
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')
const route = [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/index',
name: 'Index',