您的当前位置:首页正文

个人前端性能优化总结

2023-07-18 来源:客趣旅游网

一、网址推荐

  • webpack-bundle-analyzer:查看资源树
  • (需要翻墙)
  • - 使用CDN或按需引入组件

二、代码优化

  • 去除生产环境中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缓存

因篇幅问题不能全部显示,请点此查看更多更全内容