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

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

// 三个页面都是异步加载进来的
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-cliwebpack 模板它会把第三方库包打包成一个 vendor.js ,把运行时打包成一个 manifest.js,然后自己的业务代码打包成单独的一个文件。

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

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

a.vueb.vue 两个页面没有使用到 jquery

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

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

回答:

在c.vue中异步引用jquery吧

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注