前端性能优化方法

打包构建

1. 代码压缩gzip（html, js, css）

// npm i compression-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin')

configureWebpack:{
    plugins:[
       new CompressionWebpackPlugin({
           algrithm:"gzip",
           test:/\.(js)|(html)$/,
           minRatio:1
       })
    ]
}

2. 离线化

// npm i prerender-spa-plugin

const PrerenderSpaPlugin = require('prerender-spa-plugin')

plugins:[
    new PrerenderSpaPlugin({
        path.join(__dirname,"../dist")
        ['/','/detail'.....]
    })
]

3. resolve 优化
4. tree shaking去除冗余代码
5. 代码分块

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

6. 提取组件的 CSS

npm install mini-css-extract plugin

资源加载

1. 避免CSS阻塞
   尽快加载CSS
2. 避免JS阻塞
   使用 async、defer 进行异步加载
3. 静态资源缓存
   经常变动的资源使用协商缓存、变动较少的资源使用强缓存
4. 减少回流和重绘
5. 图片压缩、雪碧图
6. 预加载 prefetch

<!-- cdn预解析 -->
<meta http-equiv="x-dns-prefetch-control" /> 

代码编写

1. 事件委托
2. 节流和防抖
3. DOM操作尽量在documentFragment中完成
4. 路由懒加载、图片懒加载
5. 组件按需引入、异步加载
6. web worker多线程