如何优化vue项目，减小app.js和vender.js文件体积？

本文共计946个文字，预计阅读时间需要4分钟。

使用webpack配置externals减少打包体积，避免vendor.js过大导致加载时间过长。在日常项目开发中，我们常用各种第三方库来提升效率，但随之而来的问题是打包后的vendor.js体积可能过大，影响首屏加载速度。

配置webpack中externals来减少打包后vendor.js的体积

在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。

webpack的外部扩展(externals)可以有效的解决。

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

webpack之externals官方参考文档传送门，请戳这里→ externals

下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、element-ui、qs等第三方库，那么我们的目标就是把这些从输出的 bundle 中排除依赖。