vue项目打包后vendor文件过大，如何优化？解决办法

1、路由懒加载

– 我们都了解，vue在上线的时候，是用webpack工具，把所有组件里的js文件，css文件都打包到一起，我们看起来很清晰，仿佛很优秀的样子，额，但实际上就是很优秀的样子。不过里面的问题就是，所有组件里的js都会被压缩到一个文件夹里，所有的css也会被压缩在一个文件夹里，且生成了一堆.map文件。这样，首页兄弟就很难受了，我就一个简单的banner页面，你非让我加载跟我不想关的东西，还要被客户吐槽加载太慢，难受啊马飞~~~
解决方法：路由懒加载，让webpack在打包的时候，将各自组件的js以及css分别打包，页面加载的时候，只要加载到该组件时，才会加载对应的资源文件。

	//原来的router/index.js
	import home from '../pages/home/home'
	import news from '../pages/news/news

	routes: [
        {
            meta: { title: '首页' },
            name: 'home',
            path: '/home',
            component: home
        },
        {
            meta: { title: '新闻 },
            name: 'news ',
            path: '/news'
        }]
       //使用路由懒加载的格式的router/index.js
       //import home from '../pages/home/home'
	   //import news from '../pages/news/news
       routes: [
        {
            meta: { title: '首页' },
            name: 'home',
            path: '/home',
            // component: home,
            component: resolve => require(['../pages/home/home.vue'], resolve)
        }, 
        {
            meta: { title: '新闻' },
            name: 'news',
            path: '/news',
            // component: checkCode,
            component: resolve => require(['../pages/news/news.vue'], resolve)
        }, //公司服务器

结果展示：
在这里插入图片描述
就把js拆分开了，所有组件都按需加载，首页再也不用担心加载多余的资源了~~~

2、更改webpack配置文件，打包时不生成.map文件

在这里插入图片描述
将build下的productionSourceMap：true修改为productionSourceMap：fasle，修改完后，再打包就不会再生成.map文件

3、把一些资源文件直接从html页面引入

正常打包完大小为如下：
在这里插入图片描述

①：在webpack.base.conf.js中，新增`externals`项，将一些不打包的文件写入该项

//webpack.base.conf.js中修改
externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
  }
// index.html修改
<script src='./static/js/vue.js'></script>
<script src='./static/js/vue-router.min.js'></script>

vue不打包进vendor时的打包结果如下：
在这里插入图片描述
vue和vue-router不打包进vendor时的打包结果如下：

因为项目中仍有其他组件，所以并没有实现一个vendor最小的状态，可根据自己的情况自行调整。
欢迎留言指教。