首页 > 其他分享 >vue 项目优化解决方案(面试题)

vue 项目优化解决方案(面试题)

时间:2022-10-31 10:35:48浏览次数:62  
标签:文件 面试题 vue 解决方案 CDN base64 css 图片

vue 项目优化解决方案?

1.使用 mini-css-extract-plugin 插件抽离 css 2.配置 optimization 把公共的 js 代码抽离出来 3.通过 Webpack 处理文件压缩 4.不打包框架、库文件,通过 cdn 的方式引入 5.小图片使用 base64 (

对于小体积的图片,几kb的,建议使用base64格式,因为:直接使用图片,会使用一个http链接进行请求,一个小图片也运行一次http,得不偿失。
但是也有缺点:如果过大的图片使用了base64,会加大html文件或者css文件的体积,导致 关键渲染路径 (html css渲染到浏览器的过程)变慢,但是大图片不会减慢关键渲染路径的速度。

) 6.配置项目文件懒加载 7.UI 库配置按需加载 8.开启 Gzip 压缩  

CDN的优势:

  (1)CDN节点解决了跨运营商和跨地域访问的问题,访问延时大大降低;
(2)大部分请求在CDN边缘节点完成,CDN起到了分流作用,减轻了源站的负载。

标签:文件,面试题,vue,解决方案,CDN,base64,css,图片
From: https://www.cnblogs.com/LIXI-/p/16843425.html

相关文章

  • vue监视之深度监视
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e......
  • Vue组件是怎样挂载的
    我们先来关注一下$mount是实现什么功能的吧:我们打开源码路径core/instance/init.js:exportfunctioninitMixin(Vue:Class<Component>){......initLifec......
  • Vue模板是怎样编译的
    这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成renderFunction形式的字符串compiler/index.jsimport{parse}from'./parser/index'imp......
  • vue开发环境,可以配置,域名访问模式嘛,这样线上项目就可以不用打包来访问了
    看了很多博文,本地也配置了,域名需要结合端口号来访问(多个项目也不可能都是80的,所以还是需要端口号的)不需要nginx配置/etc/host域名指向127.0.0.1https://www.cnblogs......
  • vue源码分析-响应式系统(三)
    上一节,我们深入分析了以data,computed为数据创建响应式系统的过程,并对其中依赖收集和派发更新的过程进行了详细的分析。然而在使用和分析过程中依然存在或多或少的问题,这......
  • vue源码分析-响应式系统(一)
    从这一小节开始,正式进入Vue源码的核心,也是难点之一,响应式系统的构建。这一节将作为分析响应式构建过程源码的入门,主要分为两大块,第一块是针对响应式数据props,methods,da......
  • vue源码分析-动态组件
    前面花了两节的内容介绍了组件,从组件的原理讲到组件的应用,包括异步组件和函数式组件的实现和使用场景。众所周知,组件是贯穿整个Vue设计理念的东西,并且也是指导我们开发的......
  • vue监视属性1
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e......
  • Vue开发历程---音乐播放器的继续
    前言前面一篇文章​​Vue开发历程---音乐播放器​​,实现了播放音乐,以及基本的布局。但是进度条没有实现同步,本文即介绍进度条的实现。一、效果图二、心路历程1、elementUI......
  • 如何清除浮动?(面试题)
    如何清除浮动1、浮动是什么:浮动是将元素块脱离普通文本流,使其漂浮在普通文本流之上,直到碰到内容框或者上一个浮动元素的边框;2、浮动会带来的问题:1)父元素框不能被撑开;2)没有......