vue路由懒加载

webpack打包vue项目之后会发现js包会非常大，我们可以通过不同的路由来加载不同的组件来提高页面加载效率，避免首次加载页面js过大。

在路由的配置文件index.js里面引入：

// 垃圾箱
const Dustbin = () => import('@/components/projectManagement/Dustbin')

路由配置里使用：

export default new Router({
  routes: [
    {
      path: '/dustbin',
      name: 'Dustbin',
      component: Dustbin
    },
  ]
})

把组件按组分块
有时候我们想把某个路由下的所有组件或一组中的组件都打包到同一个js文件中，只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。例如在同一个文件夹下的ProjectManagement 和Dustbin 组件一起打包到同一个文件去：

在路由的配置文件index.js里面引入：

// 项目管理
const ProjectManagement = () => import(/* webpackChunkName: "projectManagement" */'@/components/projectManagement/ProjectManagement')
// 垃圾箱
const Dustbin = () => import(/* webpackChunkName: "projectManagement" */'@/components/projectManagement/Dustbin')

如果需要定义打包出来的文件名为提供chunk name只需要在webpack.prod.conf.js 里：

output: {
    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
},

=> 打包后在dist/static/js里会有projectManagement.dd9fa307a6059958050e.js文件