vue项目优化 webpack配置层面优化 前端性能优化

vue项目优化

Vue代码层面优化

v-for 遍历列表
指定非下标的唯一key, 尽量不用index, 如果只用于展示就没关系 不同时使用 v-if
图片资源懒加载
使用vue-lazyload element-ui/vant-ui Image组件本身就有懒加载的功能
路由组件懒加载 ==> 预加载
第三方插件的按需引入打包
element-ui / vant /lodash
对高频事件进行节流或防抖处理
及时销毁事件监听
大数组优化
冻结响应式数据
虚拟列表

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件

Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

webpack配置层面优化

浏览器兼容处理

JS: @babel/polyfill => core-js配置useBuiltIns: ‘usage’
CSS: 给C3样式自动添加浏览器厂商前缀 => autoprefixer => postcss-loader

拆分打包与压缩
资源预加载(prefetch)

生产环境时不生成 SourceMap

Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。

文件名hash化=>利用浏览器缓存
代码Tree Shaking

tree shaking就是当我们在项目中引入其他模块时，他会自动将我们用不到的代码，或者永远不会执行的代码摇掉

基础的Web技术层面的优化

对打包文件开启 Gzip压缩
静态资源(css/js/img)使用CDN引入

前端性能优化

SEO （Search Engine Optimization）：直译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎的自然排名。

目的是：为网站提供生态式的自我营销的解决方案，让其在行业内占据领先地位，获得品牌效益。

• 简化代码结构，更利于搜索引擎分析抓取有用内容

• 重要内容优先加载

• 语义化 HTML 代码 ，符合 W3C 标准

• 重要内容不适用 js 输出

• 少用 iframe ：搜索引擎不会抓取 iframe 中的内容

• 图片加 alt 属性

• 适用网站统计功能优化

• 每个页面只出现一个 h1 标签，h2 可以出现多次

页面级优化:

• 使用CDN

• 减少 HTTP 请求数

• 设计从实现层面简化页面

• 合理设置 HTTP 缓存

• 资源合并与压缩

• CSS sprites

• 内联图像 雪碧图

• 图片懒加载

• 将外部脚本置底

• 预渲染

• 懒执行

• 懒加载 JavaScript

• 将 CSS 放在 head 中