一：背景
因為項目功能越加越多胳泉，打包后的體積越來越大拐叉，導(dǎo)致首頁展示的時候速度比較慢，因為要等壓縮的js的包加載完畢扇商。
首頁展示的時候只需要對應(yīng)的js凤瘦，并不需要全部的js模塊，所以這里就可以用按需加載案铺，這里webpack4官方文檔提供了模塊按需切割加載蔬芥，配合es6的按需加載import()方法，可以做到減少首頁包體積，加快首頁的請求速度笔诵，只有其他模塊返吻，只有當(dāng)需要的時候才會加載對應(yīng)js。
這里參考一些資料：
webpack4官方文檔：https://webpack.docschina.org/api/module-methods/#import-
VUE的懶加載：https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/
二：開始demo
首頁先啟動一個普通的webpack4項目乎婿，可以用腳手架测僵，不過需要自己配置一些webpack4特性，這里可以參考：webpack3 項目升級 webpack4
項目起來后谢翎，就可以用import實驗一番：
這里我定義了三個界面（HelloWorld1捍靠，HelloWorld2，HelloWorld3）森逮，其中HelloWorld1用的impot()按需的方式榨婆，其他兩個都是直接import。
注意：這里的
/* webpackChunkName: "h-w1" */
是webpack4中提供的注解褒侧，給切割模塊命名良风，如果不要這個注解的話切割出來的模塊js不能分辨是那個業(yè)務(wù)模塊的，所以一般都是一個業(yè)務(wù)模塊共用一個名稱璃搜。
代碼這樣加了之后拖吼，控制臺可能會一些錯：
這個錯的意思就是不能識別import()的這種寫法，因為還需要Babel的支持这吻，網(wǎng)上查了下吊档，需要
babel-plugin-dynamic-import-node插件和配置.babelrc文件，那我們就配上：
配上這些過后唾糯，代碼確實沒有語法錯誤了怠硼，可以正常啟動訪問。
但是打包并沒有切割開代碼：
這是打的包移怯，并沒有看到我們定義的
h-w1的包香璃。
這里前前后試了幾個插件和配置都不行，語法還是抱錯舟误，最后終于試出來了：
1葡秒，要么在升級eslint的版本，用5.14以后的嵌溢；
2眯牧，要么eslint可以用4.19的，但要加上acorn插件赖草；
這里上面兩種方法都可以解決問題学少，至于前面說的配置
.babelrc文件可以還原了，那個加上反而打包沒效果了秧骑，小白我也不懂版确。扣囊。。绒疗。
最好我們就可以運(yùn)行：
npm run build 看效果了侵歇，結(jié)果又抱錯了：從出錯信息來看，是UglifyJS不支持ES6的語法吓蘑。理論上不應(yīng)該啊…
于是Google之盒至，發(fā)現(xiàn)
uglifyjs-webpack-plugin 2.0版本的Release日志中，明確提示重新切換回到uglify-js士修，因為uglify-es被廢棄了，如果需要ES6代碼壓縮樱衷，請使用terser-webpack-plugin
解決
方法一：安裝并使用[terser-webpack-plugin]：
(參考：http://makeup1122.github.io/2018/10/12/webpack-UglifyJS-issue/)
方法二：降低UglifyJS版本
這里我選第二個棋嘲，最方便，把uglifyjs-webpack-plugin 降到1.1.1版本：
再打包矩桂，終于成了沸移，把HelloWorld1分離出來獨(dú)立包
h-w1：大家可以搜索下，h-w1包里面的代碼和app包里面的代碼是不是隔離的侄榴，也可以瀏覽器訪問這包雹锣，看看h-w1包的js是不是按需加載的，這里就不貼結(jié)果了癞蚕，我自己測試都是準(zhǔn)確的蕊爵。
