Moving end H5 preloaded program

Recent pre-loaded on the mobile terminal research program carried out some sort memo Share this article

prefetch

prefetch is a browser mechanism, which utilizes browser idle time to download or prefetch documents users in the near future is likely to visit. Web page provides a set of prefetching hints to the browser, and complete silence began pulling specified documents and stores it in the cache after the current page loads in the browser. When a user accesses when one of the prefetch documents, they can quickly get from the browser cache.

<link rel="prefetch" href="/images/big.jpeg">
复制代码

Can I use

preload

<link>Preload rel attribute value of the attribute of the element can let you in your HTML page <head>inside some of the elements of writing declarative resource acquisition request, you can specify what resources are needed immediately after the page loads. This immediate need for resources, you might want to get started in the early stages of the life cycle of the page is loaded, it is pre-loaded before the main browser rendering mechanism of intervention. This mechanism makes resources available to load and get an earlier, less prone to clogging preliminary rendering of the page, and thus enhance performance. This article provides a basic description of how to effectively use the preload mechanism.

 <link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
复制代码

Can I use

prefetch & preload Summary

Above the main article on the MDN intercepted a brief overview of the characteristics prefetch and preload looks actually pretty good but some worrying compatibility for most business development does not appear to be put into use, if you want to know more about prefetch and details of preload can be read at the bottom of the article reference links

webpack support for the prefetch and preload

Now most people use webpackas a tool to build if you are involved in the project only needs to be compatible with the higher version browser then you can easily rely on webpack complete preloading, webpack magic comment can be completed automatically to a page reference Add preload& prefetch linkability labels.

webpack Magic Notes

By adding comments inline giving import()dynamic loading syntax more useful features, such as a chunk name, using a different webpackMode, prefetch, preload and so on.

import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */  `赋予 chunk 指定的名字`
  /* webpackMode: "lazy" */  `这个是默认值使用import()你什么也不加默认就是这个mode`
  /* webpackPrefetch: true */ `赋予 chunk prefetch能力`
  /* webpackPreload: true */`赋予 chunk preload能力`
  `./locale/${language}`
);
复制代码

webpack magic comment placeholder

In webpack 2.6.0 supports both a placeholder [index]and [request]a auto-incremented id, a variable matching file names

import(/* webpackChunkName: "[request]" */ `../${component}/index`)//最终生成的chunkname就是对应组件的目录名称类似这种'_some-component_index-[hash].js`
复制代码

react-loadable pre-loaded

Because we react technology stack used while also being used react-loadableto load asynchronous component, and the react-loadable also comes with using the react-loadable pre-loading function preload function so the final selection.

react-loadablePreloaded with webpackautomatic insertion of linklabels in different ways it is triggered preloaddirectly to the corresponding method when scriptthe label is inserted body, the download is complete executed directly, no need to consider the benefits of this energy is firmly compatibility can fly in the ointment it is the direct implementation of js but little effect because the definition of asynchronous component is only performed, but the life cycle of components and functions not performed (a little to explain why only the implementation of the definition without performing life cycle, because the react-router in use asynchronous loading components inevitably will cooperate, A pre-loaded so the page B but B does not perform life-cycle function)

// 官方DEMO
const LoadableBar = Loadable({
  loader: () => import('./Bar'),
  loading: Loading,
});

class MyComponent extends React.Component {
  state = { showBar: false };

  onClick = () => {
    this.setState({ showBar: true });
  };

  onMouseOver = () => {
    LoadableBar.preload();
  };

  render() {
    return (
      <div>
        <button
          onClick={this.onClick}
          onMouseOver={this.onMouseOver}>
          Show Bar
        </button>
        {this.state.showBar && <LoadableBar/>}
      </div>
    )
  }
}
复制代码

to sum up

preload& prefetchEtc. The new standard looks very nice browser support just is not so ideal situation is difficult to directly put to use, online article on these properties, but find many of the reading time to pay attention timeliness.

webpack a built-in support preload& prefetchbelieve will complete the pre-load is the most widely simplest way in the near future by webpack easy

react-loadable Plug solve the current urgent needs of low-compatible version of the browser as a program to use preloaded entries