个人前端性能优化总结

一、网址推荐

• webpack-bundle-analyzer：查看资源树 使用传送门
• 图片压缩
• 在线云转换
• 性能分析（需要翻墙）
• BootCDN - 使用CDN或按需引入组件
• 前端网站推荐

二、代码优化

• 前端性能优化-帧动画
• 前端性能优化-按需引入Echarts组件
• 前端性能优化-按需引入Vant组件
• gzip压缩-gzip压缩效率很高，可以达到70%的压缩率
• 去除生产环境中console.log

//npm i -D terser-webpack-plugin
configureWebpack:config =>{
    const  TerserPlugin = require('terser-webpack-pulugin')
    config.optimzation.minimizer.push(
     new TerserPlugin({
            extractComments:false,
            terserOptions:{compress:{drop_console:true}} //插件配置项 移除console
        })
    )
}

• 关闭SourceMap

// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,

• loading加载 - 通过添加一个加载状态，让用户在视觉上不会觉得慢
• 路由按需加载

	{
      path: '/',
      name: 'index',
      component: () => import('@/views/index')
    },

• HTTP缓存

HTTP缓存一般分为两类：强缓存(本地缓存)、协商缓存(304缓存)
根据 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。
常见用法是：
Cache-Control与 Last-Modified 一起使用；Expires与Etag一起使用；
即一个用于控制缓存有效时间，一个用于在缓存失效后，向服务查询是否有更新。
特别注意：浏览器缓存机制是浏览器内核的机制，一般都是标准的实现，即Cache-Control、 Last-Modified 、 Expires、Etag都是标准实现，你不需要操心。