单页面以及懒加载

1、了解单页应用程序（SPA）与多页应用程序（MPA）的对比

MPA：用户需要重新加载一小部分内容，但服务器也必须更新整个网页。 结果，这恶化了用户体验。

SPA：它的出现使软件开发人员可以通过仅重新加载请求的数据来解决此问题。

2、单页应用程序的优缺点

优点

1. 更快的页面加载时间
2. 更容易，更快地开发（界面减少，减少开发工作量，更利于监视和维护）
3. 离线工作能力（本地缓存数据）
4. 增强的用户体验
5. 移动应用程序的基础

缺点

1. 不利于SEO（初始化记载会保存很多信息）
2. 缺乏浏览器历史记录（当访客在各州之间跳转时，SPA不会保存）
3. 安全问题（一个安全问题是敏感数据的公开。 如果开发人员不关心初始页面加载中包含的数据，则他们可以轻松地发送不应暴露给所有用户的数据。 ）

3、懒加载

意义：
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

4、首屏加载优化有哪些方案

1、路由懒加载   

 {
      path: "/",
      name: "index",
      component: resolve => require(["./views/Index"], resolve)
    }

2、组件懒加载 

服务器开启gzip。此步的优化效果最显著。

1、先在vue-config.js中配置开启gzip 

// 安装插件
npm i --save-dev compression-webpack-plugin
 
// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
 
.....
module.exports = {
....
 configureWebpack: config => {
  if (isProduction) {
   config.plugins.push(new CompressionWebpackPlugin({
    algorithm: 'gzip',
    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    threshold: 10240,
    minRatio: 0.8
   }))
  }
 }
}

2、WEB服务器开启gzip。这里以我的nginx为例。

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

3、启用cdn加速

1）vue.config.js 在上一步的基础上继续加入config.externals的配置

configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8
        })
      );
 
      config.externals = {
        vue: "Vue",
        "vue-router": "VueRouter"
      };
    }
  }

2）在原来所有引入vue、vue-router的地方，全部屏蔽或删除

//原来对vue、vue-router的引用全部注释掉。
//涉及所有引用的文件，只要有引入就注释掉。
 
// import Vue from "vue";
// import Router from "vue-router";
 
//vue-router的非cdn引用
//Vue.use(Router);
 

3）在代码中用vue-router的时候，用VueRouter 

//cdn 引入vue-router时，源码抛出的变量是：VueRouter
console.log(VueRouter);
Vue.use(VueRouter);
 
//Vue.use(Router); 继续像原来一样用Router就会报错。