在做单页面应用的过程中,通常利用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