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

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

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

一、路由懒加载：

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

参考链接：

1. 路由懒加载 | Vue Router

二、不打包第三方库：

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

参考链接：

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

小编测试：

将 vue.js 不打包

externals: {
    'vue': 'Vue'
}

效果对比

加入 vue.js
不加入 vue.js

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

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

<!-- 在 index.html 文件中引用 -->

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<!-- 在项目根目录中的 vue.config.js 文件中 -->

module.exports = {
    productionSourceMap: false,
    configureWebpack: {
        externals: {
          vue: 'Vue'
        }
    }
}

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

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

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

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