webpack4--按需加载

2023-11-07 23:48•数据库•阅读 3298

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