require.ensure被react-router4x遺棄以后荐绝，各種問題接踵而來， 使用了叫做asyncComponent一個加載組建避消，看了看源碼低滩，他使用了一個函數(shù)返回組建的方式，來嵌套了一層岩喷，而且返回的還是import加載的形式恕沫，感覺很詫異跟直接import有什么卻別？翻了翻es6 API 沒看出所以然纱意。
于是趕緊翻看webpack里的介紹婶溯，豁然開朗【import('path/to/module') -> Promise ：動態(tài)地加載模塊。調(diào)用 import() 之處偷霉，被作為分離的模塊起點迄委，意思是，被請求的模塊和它引用的所有子模塊类少，會分離到一個單獨的 chunk 中叙身。】這個就是RR4跟3在結(jié)構(gòu)調(diào)整上的區(qū)別了硫狞。
//我的路由加載模塊部分
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的形式出現(xiàn)晃痴，不容易區(qū)分到底是誰，于是翻看解析源碼,原來是留有復(fù)值的地方的, 已經(jīng)生成好了财忽，還是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 規(guī)范不允許控制模塊的名稱或其他屬性即彪，因為 "chunks" 只是 webpack 中的一個概念紧唱。幸運的是，webpack 中可以通過注釋接收一些特殊的參數(shù)隶校，而無須破壞規(guī)定】
import(
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
'你的模塊地址'
);
怎么用如此卑劣的方法處理這么嚴(yán)肅的事情漏益，不好理解也不好看，容易被其他壓縮組件給和諧掉惠况，不知道怎么想的但是解決了問題，就此了事宁仔，等出現(xiàn)和諧問題后再想其他辦法吧稠屠。
