create-react-app 使用 webpack 打包壓縮失敗

問題，正常 npm run build 打包後，發現打包後的文件異常大，有 > 20M 的大小 

分析，

　　一、起初覺得是代碼自己過大的緣由致使的，因此一直在想如何進行代碼拆分使得文件能儘量的小，可是查詢了不少資料都沒找到爲何文件會過大

　　二、後來認真看了一下一直被我自動忽略的 npm run build 的報錯信息，發現了這句話：Failed to minify the code from this file. 因爲下面的文件致使文件壓縮失敗

　　

　　因而，頓悟啊，原來不是由於模塊沒分割致使的文件過大，而是由於文件壓縮失敗呀

三、定位問題

　　找到相應的文件，發現是由於項目組的同事使用的 supermap 插件致使的壓縮失敗。

　　那怎麼辦呢？嘗試修改報錯的當前行的內容，繼續進行編譯，發現還是不能成功。

　　而且，修改node_modules的方法並非一勞永逸的辦法，由於只要執行一次 npm install node_modules的代碼就會發生改變。

　　因而，決定單獨摘出該插件以及該插件的相關內容。

四、解決方法：報錯文件摘出

　　一、首先想到的辦法是，使用 webpack 的 externals 擴展，將我所使用的 supermap插件，以普通 script 標籤的形式引入 index.html 頁面，而後在webpack中暴露出擴展插件

　　　　此時，問題又來了。我所使用的 supermap 插件是基於 leaflet 的，這樣的話，我須要將 leaflet 一樣以上述形式經過 script 標籤引入。因而嘗試引入，引入後問題又來了。發現不但要引入 leaflet 的 js 文件，還要再引入他的 css 文件。於此種種各類嘗試，發現耗伸耗力，終究仍是有問題，因此果斷放棄。

　　二、而後想到的方法是，單獨把 supermap 的文件摘出，但不是用 script 文件引入，而是放到本身的項目的目錄中，看成本身的普通 js 引入。

　　　　經過查看代碼，發現使用的是 supermap 中 echartsLayer 中暴露的內容，所以，找到 echartsLayer.js 源碼而後放入到項目中。

　　　　此時發現，只用 echartsLayer.js 不夠的，由於他還引用了別的 js ，而後進行相應的增長。

            

　　　　

　　　　這樣子此時就完美了，把全部須要的都單獨引入。但是又遇到了個小問題，報錯說 zoom... 什麼什麼的，而後發現，是由於 Proj4Leaflet.js 的版本問題

　　　　

　　　　

　　　　發現同事使用的是經過 npm 安裝的 proj4leaflet 安裝的 js ，所以進行替換，運行OK。此時問題就徹底解決了。

　　　　npm run build 打包後只有 7M......

五、總結：看報錯信息的重要性！看報錯信息的重要性！看報錯信息的重要性！（重要的信息說三遍）

　　咱們時常會忽略 npm 的報錯信息，以爲只要編譯遠程運行成功就萬事大吉了。但是，現實告訴我，可以運行成功並非沒有問題。

六、進階：首屏加載 7M 的文件顯然並非最有方案

　　這篇文章 會經過使用 react-router4 的分片加載，進行打包優化。