Vue结合webpack实现路由懒加载和分类打包

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:'./' // 如果打包后出现文件引入报错问题一般都是这个

},

打包之后的文件树是这样的

 

转载请标明出处:Vue结合webpack实现路由懒加载和分类打包