你们要的Web前沿技术PWA在这里

PWA是progress web app的缩写，是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。

• 如果不希望看到丑陋的 # 可以使用history模式 ， 其原理依赖于 history.pushState函数
  • a标签点击以后，如果没有# 必然会页面跳转发起请求
  • 使用pushState函数可以改变url 比如 /abc 而不会发起请求
  • js通过location.pathname获取该值 /abc 做页面局部的替换
• router-view的history简单实现原理
  
• router-view实现图解
  

• 原理分析：

  • 1: 从路由A跳到路由B慢不慢？ 你敢说慢？ 因为A的时候各种js已经加载好了ok
  • 2: 那到底是什么比较慢 ？ A的首次加载
    • 慢会带来什么？
      • 1: 首屏白屏(量太大，渲染好久)
      • 2: 首屏卡顿(加载一半，一半卡住)
    • 解决方案：
      • 1: 客户端太慢，渲染容易卡住。。 服务端渲染好页面，客户端就加载个html完事
      • 2: 白屏也不错，但是如果能有个骨架屏，看起就爽了

• 插件实现思路
  

  • 需要在vue的执行代码加载之前，先让用户看到骨架屏，带app代码执行 new Vue() 替换 就好了
  • 决定加载什么js的是index.html,操作他的插件是html-webpack-plugin
  • 我们让自己的插件再其后操作，并根据其留下的数据入口获取数据并更改

• 效果预览

  • html
    
  • 后续逻辑
    
  • 再来卡顿
    

• 插件代码

    let MyPlugin = function (options) {
      this.template = options.template;
    }
    
    MyPlugin.prototype.apply = function (compiler) {
      // console.log(compiler);
      console.log('我们的插件被执行了');
      // 先指定自己怎么编译，根据别人的编译结果操作
      compiler.plugin('compilation', compilation => {
   	// 别人编译的入口
compilation.plugin('html-webpack-plugin-before-html-processing',(htmlData,callback) => {
    // html-webpack-plugin中间插入行为的地方
    htmlData.html = htmlData.html.replace(``,`
      
 
     我是默认的骨架屏
 
 
     我是user的骨架屏
 
 
     我是login的骨架屏
 
      
      
      `);
    // 不论如何两个参数，错误在前
    callback(null,htmlData);
    
});
    
      });
    }
    module.exports = MyPlugin;

    // 向dist下写入文件，当然也可以通过
      // compilation.assets['./tjx.txt'].source() 获取文件内容
  compilation.assets['./tjx.txt'] = {
    size:function () {
 return 'abc'.length;
    },
    source:function () {
      return 'abc'
    }
  }