vue-router

当项目小的时候，我没考虑要去找这个得解决方案，也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面

才发现编译后的vendor.js变得异常的大，而且几乎在项目每一个页面都需要加载这一个js，项目内容变多了后，这个文件肯定会越来越大，而且变更也会很频繁。

官方的解决方案 https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

以前的引用方式可能是这样的

import Hello from '../pages/Hello'import Index from '../pages/Index'

按照上面的方案直接更改一下引用方式就可以了

const Hello = r => require.ensure([], () => r(require('../pages/Hello')), 'group-b')const Index = r => require.ensure([], () => r(require('../pages/Index')), 'group-a')

把属于同一个功能分类的组件或者某个路由下的组件打包放在同一个chunk中，只需要给chunk命名，提供require.ensure第三个参数作为chunk的名称

Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 require.ensure的依赖（传空数组就行）

打包结果如下：

chunkname 也可以不写，不写跟写不同名字效果是一样的