You want cutting-edge Web technologies PWA here

PWA is an acronym for progress web app, it is a concept, using a variety of technologies to enhance the web app's features to make the site even better experience, can simulate some of the original features, such as push notification.
history mode
• If you do not want to see ugly # can use history mode, the principle relies on history.pushState function
- After a click on the tab, if not necessarily the page jump # initiated the request
- using pushState function can change the url such as / abc and will not initiate a request
- js obtain this value by location.pathname / abc do partial page replacement
• router-view of history is simple to achieve principle

• router-view graphical realization

Homemade webpack skeleton screen plug-in implementation

• Principle analysis:
--1: B slow to jump the route not slow route from A? You say slow? A variety of time because of good js already loaded the ok
- 2: That in the end is what slow? A first load of
• Slow What will bring?
--1: The first screen black and white (the amount is too large, rendering a long time)
- 2: The first screen Caton (half load, half stuck)
• Solution:
--1: The client is too slow, rendering easy to get stuck. . Server-side page rendering is good, the client loads a html bin
- 2: black and white is also good, but if you can have a skeleton screen, it looks cool
• Plug the realization of ideas

- vue required before the execution of the code loaded, let users see the skeleton screen with app code execution new Vue () to replace just fine
- elects to what is js index.html, his operation is plug-WebPACK-plugin HTML
- we let our own plug-in operation again thereafter, according to their data and get left data entry and change
• effects preview
- HTML

- the logical follow-up

- again Caton

• plug-in code
the let the 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(`<div id="app"></div>`,`
                <div id="app">
                  <div style="background-color:red;height:300px;display:none;" id="default" >
                      我是默认的骨架屏
                  </div>
                  <div style="background-color:red;height:300px;display:none;" id="user" >
                      我是user的骨架屏
                  </div>
                  <div style="background-color:red;height:300px;display:none;" id="login" >
                      我是login的骨架屏
                  </div>
                </div>
                <script>
                      var hash = window.location.hash;
                      var path = window.location.pathname;
                      if (path === '/login' || hash === '#/login') {
                        document.getElementById('login').style.display = 'block';
                      } else if (path === '/user' || hash === '#/user') {
                        document.getElementById('user').style.display = 'block';
                      }
                </script>
                `);
              // 不论如何两个参数，错误在前
              callback(null,htmlData);

          });

  });
}
module.exports = MyPlugin;

• Use plug-in

Multi-page application
• The core idea: vue is actually two projects, one webpack packaging, associated with the url link
- webpack operations:

1. A plurality of inlets {main1: './ usermain.js', main2: './ goodsmain.js'}
2. Html multiple plug-ins
   • Notes
   -
   -
   • getHtmls idea
   - a more flexible reading of the heads of the js file (entry) entry: { 'js file name': 'js file path'}
   - read more flexible take html files under each line (Home .html) plugins:. [] concat ([new new HtmlWebpackPlugin (), new new HtmlWebpackPlugin ()])
   • filename property is generated relatively dist file name xxx.html
   • template template generated reference need an absolute path relative path || './xxx.html'
   • of chunks are: [filename] Specifies the name of the third introduction js file
   •
   •
   - this [name] is actually the key entry
   using CachesAPI get content specified cache
   • caches.open ( 'Key') the then (function (cachedRequests) {.
   cachedRequests.match ( 'appshell') the then (R & lt => r.text ()) .then (the console.log);.
   });

DB Compare

PWA (progressive / Web / the Application)
• Slowly rein you
• Offline browsing web applications, desktop applications generate, top notification (pages may not exist), pre-caching (page does not start before you, to save the browser requests a resource ) (real time access, very fast, requesting local), skeleton screen, App shell (using the cache mechanism save css + html + js etc.), sharing, full-screen icon
•
•

• chrome launched PWA
• chrome 55 more before the end phones support all of these
- IOS safari consider supporting
• English see support for caniuse Chinese official website you can see that lavas

Supplementary ah. . Supplementary webpack plug their action file
// dist write to the file, of course, can also
// compilation.assets [ './ tjx.txt'] . Source () Get file contents
compilation.assets [ './ tjx.txt '] = {
size: function () {
return' abc'.length;
},
Source: function () {
return 'ABC'
}
}