咨询：基于vue-cli与Webpack模板的Vue项目路由懒加载实现方法

嘿，我来教你怎么给你的Vue项目实现路由懒加载！你用vue init webpack my-project创建的项目，只需要修改router/index.js里的组件引入逻辑就行，非常简单，下面给你详细说明：

问题背景 #

你现在的路由是通过静态import语句把所有组件提前加载进来的，这会导致初始打包的文件体积偏大，拖慢页面首次加载的速度。而路由懒加载能让组件在用户访问对应路由时才被加载，有效优化首屏性能。

修改步骤 #

只需要把router/index.js里的静态组件导入改成动态导入的形式，Webpack会自动把每个懒加载的组件打包成单独的chunk文件，实现按需加载。

修改后的router/index.js代码如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      // 动态导入实现懒加载
      component: () => import('@/components/HelloWorld')
    },
    {
      path: '/test',
      name: 'test',
      // 同样修改这里的组件引入
      component: () => import('@/components/Test')
    }
  ]
})

进阶优化：给chunk文件命名 #

如果你想让打包后的chunk文件更容易识别（方便调试和维护），可以添加Webpack注释来指定chunk名称：

// 给HelloWorld组件的chunk指定名称
component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld')
// 给Test组件的chunk指定名称
component: () => import(/* webpackChunkName: "Test" */ '@/components/Test')

这样打包后，对应的组件chunk文件会被命名为HelloWorld.[hash].js和Test.[hash].js，辨识度更高。

注意事项 #

你的main.js文件完全不需要修改，保持原来引入router的方式就能正常工作啦。

内容的提问来源于stack exchange，提问作者shamon shamsudeen