vue路由模块懒加载

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路由模块懒加载_第1张图片

vue路由模块懒加载_第2张图片

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

vue路由模块懒加载_第3张图片

你可能感兴趣的:(vue,性能优化)