项目优化 部分

• 1.项目性能优化
• 2.项目开发优化
• 3.图片优化
• 4.项目实践
• 5.优化详解-路由懒加载

https://juejin.cn/post/6959091982731837447?utm_source=gold_browser_extension (opens new window)

1.项目性能优化

• 优化打包速度和体积

  ① webpack 插件打包体积分析工具们可以查看具体包的体积分布

  ② webpack 配置插件,JS 和图片压缩。这一块可以很明显降低包的体积

  ③ 去除多余的依赖，以及去除一些依赖中不需要的部分。比如 moment 中国际时间的部分，或者使用 dayjs。element、echarts都可以按需引入

  ④ 尽量少使用图标，以icon代替

  ⑤ webpack Tree Shaking去除无用代码

  ⑥ 设置 babel 的作用范围，让依赖不进行转译。因为插件其实都是做了es5的转义的

• 优化页面加载时间：

  ① webpack 配置大文件 js 拆分

  ② 路由及组件的懒加载

  ③ 开启 http2（尤其是有 gis 地图的情况下，http2 没有请求个数的限制）

  ④ gzip 压缩

  ⑤ ssr 服务端渲染

• 感知优化

  ① 骨架屏

  ② keep-alive 缓存

  ③ 节流和防抖

  ④ loading 效果

• 查看指标： LightHouse

2.项目开发优化

• 配置本地代理
• alias 别名，可以配置常用的路径别名
• 环境变量，区分开发、测试、线上
• 打包去掉 console 和 debug
• vscode统一配置eslint和代码格式化
• 一些vscode插件

3.图片优化

https://juejin.cn/post/6965761736083243044?utm_source=gold_browser_extension (opens new window)

• 1. 图片压缩

4.项目实践

https://juejin.cn/post/6949896020788690958?utm_source=gold_browser_extension#heading-30 (opens new window)

运控平台项目里：10.4m=>6.22m

5.优化详解-路由懒加载

• 起因： SPA 项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有的资源，造成首页加载很慢，降低用户体验
• 做法:（）=> import('/xxx') 将路由写成懒加载后，重新打包后，首页资源拆分为 app.js 和 home.js，以及对应的 页面的 JS,css 文件。就是把各个页面用到的资源拆分。减少首页加载量
• 原理：ES6 的动态地加载模块——import()