Vue 打包优化方案（解决 vendor.js 过大的问题）

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。

优化方式通常有以下方式：

一、路由懒加载：

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

参考链接：

1. https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

二、不打包第三方库：

减少 vendor.js 的体积，从本质上来解决这种问题。

参考链接：

1. https://segmentfault.com/a/1190000016309142
2. https://blog.csdn.net/LonewoIf/article/details/87777367

小编测试：

将 vue.js 不打包

externals: {
    'vue': 'Vue'
}

效果对比

加入 vue.js
不加入 vue.js

vendor.js（当前包含 vue-router.js），设置 vue.js不加入打包后，vendor.js 文件过大问题得到根治。除了vue.js，还有其它第三方库，比如element-ui，layer等优秀的插件和框架都可以通过这种方式来解决。

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号