vue项目比较小的时候不会有太大的加载问题,但是随着项目增大,当打包构建应用时,vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

以前引用方式:
import Hello from '../pages/Hello'
改为这样引用:

const Hello = () => import('../pages/Hello')

webpack.prod.conf.js的配置需改为如下:

filename: utils.assetsPath('js/[name].[chunkhash].js'),

vue路由模块懒加载

vue路由模块懒加载

切换路由则按需加载模块:

vue路由模块懒加载

相关文章:

  • 2021-11-26
  • 2021-06-30
  • 2021-08-24
  • 2021-04-28
  • 2021-07-08
  • 2021-11-27
  • 2021-12-25
  • 2019-03-20
猜你喜欢
  • 2021-07-14
  • 2021-06-05
  • 2021-07-18
  • 2019-03-01
  • 2021-08-08
相关资源
相似解决方案