問題，正常 npm run build 打包后，發現打包后的文件異常大，有 > 20M 的大小
分析，
1、起初以為是代碼本身過大的原因導致的，所以一直在想如何進行代碼拆分使得文件能盡可能的小，但是查詢了很多資料都沒找到為什么文件會過大
2、后來認真看了一下一直被我自動忽略的 npm run build 的報錯信息，發現了這句話：Failed to minify the code from this file. 由於下面的文件導致文件壓縮失敗
於是，頓悟啊，原來不是因為模塊沒分割導致的文件過大，而是因為文件壓縮失敗呀
3、定位問題
找到相應的文件，發現是因為項目組的同事使用的 supermap 插件導致的壓縮失敗。
那怎么辦呢？嘗試修改報錯的當前行的內容，繼續進行編譯，發現仍是不能成功。
並且，修改node_modules的方法並不是一勞永逸的辦法，因為只要執行一次 npm install node_modules的代碼就會發生改變。
於是，決定單獨摘出該插件以及該插件的相關內容。
4、解決方法：報錯文件摘出
1、首先想到的辦法是，使用 webpack 的 externals 擴展，將我所使用的 supermap插件，以普通 script 標簽的形式引入 index.html 頁面，然后在webpack中暴露出擴展插件
此時，問題又來了。我所使用的 supermap 插件是基於 leaflet 的，這樣的話，我需要將 leaflet 同樣以上述形式通過 script 標簽引入。於是嘗試引入，引入后問題又來了。發現不但要引入 leaflet 的 js 文件，還要再引入他的 css 文件。於此種種各種嘗試，發現耗伸耗力，終究還是有問題，所以果斷放棄。
2、然后想到的方法是，單獨把 supermap 的文件摘出，但不是用 script 文件引入，而是放到自己的項目的目錄中，當作自己的普通 js 引入。
通過查看代碼，發現使用的是 supermap 中 echartsLayer 中暴露的內容，因此，找到 echartsLayer.js 源碼然后放入到項目中。
此時發現，只用 echartsLayer.js 不夠的，因為他還引用了別的 js ，然后進行相應的增加。
這樣子此時就完美了，把所有需要的都單獨引入。可是又遇到了個小問題，報錯說 zoom... 什么什么的，然后發現，是因為 Proj4Leaflet.js 的版本問題
發現同事使用的是通過 npm 安裝的 proj4leaflet 安裝的 js ，因此進行替換，運行OK。此時問題就完全解決了。
npm run build 打包后只有 7M......
5、總結：看報錯信息的重要性！看報錯信息的重要性！看報錯信息的重要性！（重要的信息說三遍）
我們時常會忽略 npm 的報錯信息，覺得只要編譯遠程運行成功就萬事大吉了。可是，現實告訴我，能夠運行成功並不是沒有問題。
6、進階：首屏加載 7M 的文件顯然並不是最有方案
這篇文章 會通過使用 react-router4 的分片加載，進行打包優化。