webpack 单页面中，某一个页面引用了一些第三方类库，怎么进行打包比较合理？

Question

学习webpack过程中遇到了一些问题，假设现在做的一个vue单页应用只有 a、b、c 三个页面，

// 三个页面都是异步加载进来的
const Routers = [
    {
        path: '/a',
        component: (resolve) => require(['./views/a.vue'], resolve)
    },
    {
        path: '/b',
        component: (resolve)=>require(['./views/b.vue'],resolve)
    },
    {
        path: '/c',
        component: (resolve)=>require(['./views/c.vue'],resolve)
    }
];

根据 vue-cli 的 webpack 模板它会把第三方库包打包成一个 vendor.js ,把运行时打包成一个 manifest.js，然后自己的业务代码打包成单独的一个文件。

现在的问题是，假设 c.vue 这个页面访问的相对会比较少，但是只有它要引用到jquery，

打包的时候 jquery 会被打包进 vendor.js 里面，

a.vue 与 b.vue 两个页面没有使用到 jquery，

访问 index.html 的时候，会加载 vendor.js ， 但是如果用户根本就不需要去访问 c 页面，这种情况下被打包进 vendor.js 的 jquery 好像就根本没有利用率不需要被打包进去一样。

一般大家是怎么解决这个问题的呢？

Answer 1

在c.vue中异步引用jquery吧