vue按需加载实现

按需加载：1. 将重量级路由内容单独生成一个或者多个js文件，而不是全部放在app.js中；2. 路由访问时再去加载对应的代码块。

webpack打包会自动将所有依赖的JS代码打入一个文件，如果工程特别大，依赖的内容特别多的话，就会导致该文件特别的大，而大文件加载会导致性能不是特别的好。此时按需加载就显得尤为重要。

参考：点击打开链接

未按需加载生成的目录：

app.js： 这个是项目代码的集合；

manifest：方法定义(webpackjson)，变动模块加载，公共代码块抽离，需最先引用

vendor: node_modules里面的依赖会打到改文件里面，除非添加了新的依赖，否则该文件不需要改动

这是未配置按需加载打包生成的文件

接下来配置按需加载：

routes配置：

component配置：通过require.ensure将依赖的路由(包括里面的依赖)打入一个额外的js当中，这个js的chunk就是chunknamePlatform，可在output中配置chunkFileName参数来设置该文件的输出名。这里是通过require.ensure方法进行分割，还有一种方法,通过webpack的import：const FrameworkPlatform = ()=>import("chunkname", "/foo.vue")，两种原理是一样的。第二种方法可参考官网：路由懒加载  

编译过程：

可以看出，chunknamePlatform里面包含了6,9,10,11,12,13,14的内容，而看最后生成的文件

按理说，chunknamePlatform.js里面已经包含6.js了，为什么还有6.js生成呢？这是因为我对platform的children路由继续使用了按需加载,并且webpack.ensure的第三个参数也设为了chunknamePlatform，也就会导致chunknamePlatform这个父级的子路由也会再生成单独的文件，而且这些单独文件里面的内容在chunknamePlatform.js中也会生成一遍。

可以有以下两种解决办法：1. 对其自路由使用import引入即不会生成这些文件；2. 子路由的webpack.ensure的第三个参数换一个名字，不再叫chunknamePlatform，那么就会生成单个子路由文件而不会再chunnamePlatm.js里面继续生成一遍了。

如果子路由里面的内容还是特别多的话可以考虑使用第二种方法，如果子路由的依赖已经很轻量了，就不需要再生成独立的文件了，即使用第一种方法。

浏览器中，在未切换到新路由时，chunknamePlatform.chunk.js没有加载进来：

在切换到platform的路由之后，异步加载了/chunknamePlatform.chunk.js

import和require.ensure()的区别：

import可以在加载模块失败时进行错误处理，因为返回的是Promise；

require.ensure可以使用参数给模块命名，而import目前还不支持该功能。

2018-05-04新增：

如果父路由设置按需加载，子路由的path需设置成根路径，不然直接输入子路由的地址不会加载父路由的模块js