react-router4 按需加载分析

require.ensure被react-router4x遗弃以后，各种问题接踵而来， 使用了叫做asyncComponent一个加载组建，看了看源码，他使用了一个函数返回组建的方式，来嵌套了一层，而且返回的还是import加载的形式，感觉很诧异跟直接import有什么却别？翻了翻es6 API 没看出所以然。
于是赶紧翻看webpack里的介绍，豁然开朗【import('path/to/module') -> Promise ：动态地加载模块。调用 import() 之处，被作为分离的模块起点，意思是，被请求的模块和它引用的所有子模块，会分离到一个单独的 chunk 中。】这个就是RR4跟3在结构调整上的区别了。

//我的路由加载模块部分
let ViewIndex =  asyncComponent(()=>import( "../view/index/index.js"));

//asyncComponent代码
import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();
      
      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;
        
      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

但是问题又来了，chunk名称以id的形式出现，不容易区分到底是谁，于是翻看解析源码,原来是留有复值的地方的, 已经生成好了，还是webpack的问题，于是接着在webpack的import中找。

var ViewIndex = (0, _AsyncComponent2.default)(function () {
  return __webpack_require__.e/* import() */(3).then(__webpack_require__.bind(null, 765));
});
__webpack_require__.e = function requireEnsure(chunkId) {
/******/        var installedChunkData = installedChunks[chunkId];
/******/        if(installedChunkData === 0) {
/******/            return new Promise(function(resolve) { resolve(); });
/******/        }
/******/
/******/        // a Promise means "currently loading".
/******/        if(installedChunkData) {
/******/            return installedChunkData[2];
/******/        }
/******/
/******/        // setup Promise in chunk cache
/******/        var promise = new Promise(function(resolve, reject) {
/******/            installedChunkData = installedChunks[chunkId] = [resolve, reject];
/******/        });
/******/        installedChunkData[2] = promise;
/******/
/******/        // start chunk loading
/******/        var head = document.getElementsByTagName('head')[0];
/******/        var script = document.createElement('script');
/******/        script.type = 'text/javascript';
/******/        script.charset = 'utf-8';
/******/        script.async = true;
/******/        script.timeout = 120000;
/******/
/******/        if (__webpack_require__.nc) {
/******/            script.setAttribute("nonce", __webpack_require__.nc);
/******/        }
/******/        script.src = __webpack_require__.p + "" + ({"1":"index","3":"ViewIndex","4":"ViewInfos"}[chunkId]||chunkId) + "-chunk.js";
/******/        var timeout = setTimeout(onScriptComplete, 120000);
/******/        script.onerror = script.onload = onScriptComplete;
/******/        function onScriptComplete() {
/******/            // avoid mem leaks in IE.
/******/            script.onerror = script.onload = null;
/******/            clearTimeout(timeout);
/******/            var chunk = installedChunks[chunkId];
/******/            if(chunk !== 0) {
/******/                if(chunk) {
/******/                    chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
/******/                }
/******/                installedChunks[chunkId] = undefined;
/******/            }
/******/        };
/******/        head.appendChild(script);
/******/
/******/        return promise;
}

果然下面有介绍：【import 规范不允许控制模块的名称或其他属性，因为 "chunks" 只是 webpack 中的一个概念。幸运的是，webpack 中可以通过注释接收一些特殊的参数，而无须破坏规定】

import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  '你的模块地址'
);

怎么用如此卑劣的方法处理这么严肃的事情，不好理解也不好看，容易被其他压缩组件给和谐掉，不知道怎么想的但是解决了问题，就此了事，等出现和谐问题后再想其他办法吧。