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" */
  '你的模塊地址'
);
複製代碼

怎麼用如此卑劣的方法處理這麼嚴肅的事情，很差理解也很差看，容易被其餘壓縮組件給和諧掉，不知道怎麼想的可是解決了問題，就此了事，等出現和諧問題後再想其餘辦法吧。