webpack4--按需加載

在做單頁面應用的過程中，通常利用webpack打包文件，將依賴的外部問價單獨打一個vendor.js。這樣就會有個問題，這個文件會隨着你引用的包的增多，體積會越來越大。在路由中利用import 引用文件可以將路由文件單獨打包成小塊的文件。

同樣在引用比如 echarts 等文件的時候 可以利用 import（）來做異步加載，這樣就會將該文件從vendor.js 中脫離出來，在用到的時候加載。能夠使用戶的體驗更好。尤其是首屏的加載。

例如

import ('@/util/echarts').then(modules =>{
        let echarts = modules.default
        let myChart = echarts.init(document.getElementById('flowLine'))
        myChart.setOption(lineData)
        let myChart1 = echarts.init(document.getElementById('flowcakeOne'))
        myChart1.setOption(cakeData)
          let myChart2 = echarts.init(document.getElementById('flowcakeTwo'))
        myChart2.setOption(cakeData)
        
        window.onresize = function(){
            myChart.resize();
            myChart1.resize();
            myChart2.resize()
        }
      })

　　這樣就會在用到的時候去加載 echarts.js