提升前端构建工具性能
reference: https://www.bilibili.com/video/BV1Vu4y1C73B >
提升前端构建工具性能可以从几方面来看 .
代码压缩压缩.
js
css
文件以此减少代码的体积资源优化类似于图片. 字体 视频 音乐 之类的静态资源进行特定的处理. 小的图片可以采用
base64
减少网络请求传输. 字体用font-spider
进行压缩 . CDN处理媒体资源什么的tree-shaking代码.
tree-shaking
减少无用的代码占用 . 貌似 css 代码也可以使用 purgeCSS 来进行处理代码分割分割出非首屏的代码. , 分成小包 ,优先加载 . 加快首屏的展示速度
缓存文件采用哈希命名. , 只更新那些需要变动的文件
总结
现在大抵已经了解了 . 优化前端需要几个层面的
- 构建工具, 正如上面所说的
代码压缩
资源优化
tree-shaking
代码分割
哈希缓存更细
- 从开发时的代码来说.
- 在合适的时候使用异步. 减少线程阻塞的时间.
Vue
在router
中使用import
来动态加载可以看见的组件.Vue
中也有异步组件defineAsyncComponent()
可以极高首屏加载速度.- 还有就是变量的问题,
ref
普通变量尽量减少用ref
封装. 也能小幅度提高相应速度. - 在
Vue
中不要直接导入全局包, 引入分包的函数更容易减少打包的代码量. - 使用
SSR
加速首屏的优化.
- 网络方面来说. 套用
CDN
让离用户最近的地方分发资源. - 浏览器端的优化
- 合理利用浏览器的缓存, 减少服务器的文件下发.
- 加钱居士 . 弄个好的服务器, 减少多人下使用的负载.