前端页面优化及SEO_路由懒加载能提升seo吗-CSDN博客

页面优化

一、路由懒加载

路由懒加载是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度。
方法一：require.ensure
参数：
①[ ]：依赖的模块数组
②回调函数，该函数调用时会传一个require参数
③模块名，用于构建时生成文件时命名使用
实例：

{
  path: '/index',
  component: r => require.ensure([], () => r(require('@cp/home')), 'home')
}

方法二：import
实例：

const Home = () => import('@cp/home')
{
  path: '/index',
  component: Home
}

require 是运行时调用，所以require理论上可以运用在代码的任何地方
import 是编译时调用，所以必须放在文件开头

二、打包优化

npm run build编译之后，我们查看编译生成的文件，发现有很多.map文件，这些文件占了不小的空间。
.map文件的作用是帮助编译后的代码调试，但是我们上线的代码已经调试完成，所以上线时可以不生成.map文件。

vue.config.js

module.exports = {
  productionSourceMap: false, // 不需要生产环境的source map，加速构建
}

三、使用字体图标代替切图

字体图标的优势:
（1）字体图标任意缩放不会失真
（2）在项目中导入后，以css样式引用，相较于传统的图片大大减少请求数量，优化性能
（3）修改方便，如需要切换主题色可由css控制，避免视觉反复切图的工作量
在线生成工具.

四、使用雪碧图

雪碧图的优点:
（1）将多张图片合并到一张图片中，可以减小图片的总大小。
（2）将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

五、提取公共样式和方法

（1）复用的样式应当提取到公共的样式表中复用
（2）公共的方法应当提取到公共的js中复用
（3）表单验证的提取

六、控件销毁

1、页面切换释放:
使用的C++控件应当及时销毁

2、 $destroy
完全销毁一个实例,清理它与其它实例的连接，解绑它的全部指令及事件监听器。

const vueInstance = new Vue({
  el: '#app',
  data() {
    return {
      MsgNotifyParams: {}
    }
  }
})

window.onbeforeunload = function (e) {
  window.vueInstance.$destroy()
}

七、定时器销毁

路由离开及时销毁定时器

beforeDestroy () {
  let _that = this
  // 清除Timeout定时器
  _that.timerLine && clearTimeout(_that.timerLine)
  _that.timerPie && clearTimeout(_that.timerPie)

  // 页面切换时清空echars
  myChartLine.clear()
  myChartPie.clear()
}

八、解绑事件

路由离开及时解绑事件：vm.$off()

九、在vue中使用keep-alive

vue2.0提供了一个keep-alive组件，用来缓存组件,避免多次加载相应的组件,减少性能消耗，但keep-alive是一把双刃剑，确实需要缓存组件的时候才使用。

十、代码层面优化

1、v-show，v-if 用哪个？
（1）只要涉及到权限相关的展示无疑要用 v-if
（2）在没有权限限制时根据用户点击的频次选择，频繁切换的使用 v-show，不频繁切换的使用 v-if（减少页面中 dom 数量）

2、不要在模板里面写过多的表达式与判断
v-if="isShow && isAdmin && (a || b)"，这种表达式虽说可以识别，但是不是长久之计，当看着不舒服时，适当的写到 methods 和 computed 里面封装成一个方法，这样的好处是方便我们在多处判断相同的表达式，其他权限相同的元素再判断展示的时候调用同一个方法即可。

3、循环调用子组件时添加 key
key 可以唯一标识一个循环个体，可以使用例如 item.id 作为 key，假如数组数据是这样的 [‘a’ , ‘b’, ‘c’, ‘a’],使用 :key=“item” 显然没有意义，更好的办法就是在循环的时候 (item, index) in arr，然后 :key="index"来确保key 的唯一性。不设置key值时vue会抛出警告。

4、遵守编码规范
语义化标签，避免乱嵌套，合理命名属性,使用高效简洁的css选择器等等

5、合理利用vue生命周期
减少在created生命周期中做ajax请求,而是放在mounted生命周期中,以不阻塞页面生成dom

SEO

SEO：搜索引擎优化。

一、内部优化

1、META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化；
①title：只要强调重点即可，重要关键词出现不要超过2次，而且要靠前，每个页面的title要有所不同。
②description：把网页内容高度概括到这里，长度要合理，不可过分堆砌关键词，每个页面的description要有所不同。
③keywords：列举几个重要的关键词即可，不可过分堆砌。
2、内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接；
3、网站内容更新：每天保持站内的更新(主要是文章的更新等)。