Vue项目中路由设置一般会引入组件，然后使用。但是这会造成项目一次加载很多组件，影响响应时间。解决这个问题就可以使用路由的懒加载。有三种方法可以实现：
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:r=>require.ensure([],()=>r(require('@/components/HelloWorld')),'HelloWorld') // 1.
// component:()=>import('@/components/HelloWorld'/*webpackChunkName: "helloworld2"*/) // 2.
// component:resolve=>require(['@/components/HelloWorld'],resolve) // 3.
}
]
})
在router/index.js中是这样修改的，但是还是不够的，我们还需要配置build的文件
在build/webpack.prod.conf.js中还需要修改chunkFilename和publicPath
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
// chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
chunkFilename:utils.assetsPath('js/[name]-[chunkhash:8].js'),
publicPath:'./' // 如果打包后出现文件引入报错问题一般都是这个
},
打包之后的文件树是这样的
