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

系统管理员 2021-12-18 17:43 1020阅读 0赞

# 博主推荐大家阅读我的另一篇文章：《[教你搭建一个页面秒开的Vue项目][Vue]》 #

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

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

### 一、路由懒加载： ###

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

参考链接：

1.  [路由懒加载 | Vue Router][_ Vue Router]

### 二、不打包第三方库： ###

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

参考链接：

1.  [https://segmentfault.com/a/1190000016309142][https_segmentfault.com_a_1190000016309142]
2.  [Vue 项目打包以后 vendor.js 体积太大，影响首次加载速度\_LonewoIf的博客-CSDN博客][Vue _ vendor.js _LonewoIf_-CSDN]

**小编测试：**

将 vue.js 不打包

externals: {
        'vue': 'Vue'
    }

效果对比

> 不同版本的 vue-cli 配置方式是不同的，cli4可以参考这个：https://blog.csdn.net/xzxlemontea/article/details/108879220

# 三、vue-cli4设置忽略的打包文件 #

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    
    
    
    module.exports = {
        productionSourceMap: false,
        configureWebpack: {
            externals: {
              vue: 'Vue'
            }
        }
    }

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

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Vue]: https://helang.blog.csdn.net/article/details/120343065
[_ Vue Router]: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
[https_segmentfault.com_a_1190000016309142]: https://segmentfault.com/a/1190000016309142
[Vue _ vendor.js _LonewoIf_-CSDN]: https://blog.csdn.net/LonewoIf/article/details/87777367
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211218/f130adb3dd7045c18b024a6dc0b06e8e.png