使用vue打包时vendor文件过大或者是app.js文件很大

解决Vue打包时文件过大的问题：优化vendor和app.js文件

对于初次接触Vue 2.0开发的朋友们，可能会遇到打包后vendor文件过大或者app.js文件过于庞大的问题。这个问题在使用vue-cli脚手架并搭配Element-ui进行UI开发时尤其明显。今天，我将为大家分享一些针对这个问题的解决方案，希望能帮助到大家。

一、问题的根源

在使用webpack进行打包时，所有的库都会被打包到一起，导致文件过大。这就是vendor文件过大的主要原因。

二、解决方案

1. 把不常改变的库通过CDN引入

一种解决方法是将一些不经常变动的库，例如vue、vue-router、element-ui等，通过CDN引入，而不是在打包时将它们包含进去。这样，webpack就不会把这些库打包进去，从而减小vendor文件的大小。

在build/webpack.base.conf.js文件中，我们需要添加以下代码：

```javascript

externals: {

'vue': 'Vue',

'vue-router': 'VueRouter',

'element-ui': 'ELEMENT',

}

```

请注意，需要将main.js中对element的引入删掉，否则打包后的app.css仍然会包含element的css。

2. 路由懒加载

除了上述方法，我们还可以使用路由懒加载来进一步优化。刚开始使用路由时，所有的路由资源都会被一次性加载，如果项目大，加载的内容就会很多，会导致页面加载速度慢，影响用户体验。

为了解决这个问题，我们可以使用异步加载路由。这样，每次进入一个新页面时，只会加载该页面所需要的资源。这可以显著减小app.js文件的大小。

为了实现路由懒加载，我们可以在router.js中使用异步组件的方式定义路由。例如：

```javascript

const router = new VueRouter({

routes: [

{ path: '/home', component: () => import('./Home.vue') }

]

})

```

这样，每次进入/home页面时，才会加载Home.vue组件。这会导致生成多个小的js文件，如1.x.js、2.x.js等，而vendor.x.js会被拆分成多个小文件，app.js也会变得很小。

三. 进一步优化

为了加快打包速度并减小项目文件的大小，我们可以选择不生成map文件。map文件通常很大，对减小文件大小没有帮助。要取消生成map文件，只需找到config/index.js文件，将其中的devtools选项设置为false即可。

以上就是解决Vue打包时vendor文件过大或app.js文件过大的问题的几种方法。希望对大家有所帮助。如果你有任何疑问或需要进一步的解释，请给我留言。也要感谢大家对狼蚁SEO网站的支持！

（注：文中提到的狼蚁网站SEO优化为虚构内容，仅用于举例说明。）