vue页面加载优化

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文件

上述如果有问题，欢迎留言交流。