vue 多个【路由组件】引用同一个第三方库问题

Question

vue-cli 生成的项目使用了路由懒加载；
项目中的路由比较多，而有些路由之间互相并不会跳转，用户可能只在某个路由下操作，

在多个路由组件引入同一个第三方库(如echarts等)的时候，如何将这个第三方库提取出来？

目前情况是vue-cli会将echarts或者其他库打包很多份（每个依赖于echarts的路由组件里都有个echarts）
如下图所示，路由1、路由2 引入了echarts，两个路由组件各自打包了一份echart，路由3未引入。

实现效果为：

1. 在进入某个路由后，如果这个路由组件依赖了echarts才加载echarts库。
2. 如果这个路由并没有依赖这个库，就不加载。
3. 而多个路由组件同时依赖这个库(在依赖了同一个库的路由之间跳转)，则只需要加载一次。
4. 不使用webpack.DllPlugin因为dll需要在页面使用script标签引入，并不能达到按需加载的目的。

Answer 1

多方引用，打包的时候不会打包多份，只会在bundle里面打包一份echarts代码，引用的文件那里只是一个引用代码。
用require.ensure，在进入那个页面的时候再动态引入echarts，已经引入过的文件只会走304。

require.ensure([], function () {
    require("echarts");
    // 所有关于echarts的代码都在这后面
});

Answer 2

commonchunks