laravel+vue优化vue单文件过大 app.js过大

博主最近在写laravel+vue+element的一个项目,因为不是很了解webpack所以踩了不少坑，其中就有vue单文件过大问题，于是在这里记录下解决方法。

---

主要思路是分为两点。

1. 减少webpack打包体积，将不用修改的库用cdn引入。
2. 使用vue-router路由懒加载

1.cdn引入

---

cdn引入不需要修改app.js
现在我们来写一下，使得我们可以从外部引入而不必使用自己的阿里云小水管慢慢加载。
推荐同学们一定要看完再到自己的项目上实践，不要看一点写一点。
首先，我们要让webpack不在打包我们上述的库，那么我们就需要改webpack的配置文件，在laravel中webpack的配置文件被分离，我们要找到项目根目录中的webpack.mix.js，在里面写上这些东西

mix.webpackConfig({
    externals: {
    	'vue': 'Vue',//这些是你不需要webpakc帮你打包的库
    	'vue-router': 'VueRouter',
    	'element-ui': 'ELEMENT',//这个比较坑　一开始我还以为是ElementUI结果就报错了XD
 	}
});

然后，我们要去index.blade.php(这个文件是我们的app.js文件的应用页面，相信用laravel+vue的大多是单页面应用)。修改为

	
	
	
	
	{{-- 新加的 --}}
	


	

	  
	
	
	{{-- 新加的 --}}
	{{-- 新加的 --}}
	{{-- 新加的 --}}
	
	{{-- 一定放在app.js前面 --}}

这是我的index，大家在修改时一定看清自己的版本，这个搞错了也会出问题。
这样已经完成了cdn引入。

2.路由懒加载

---

喜欢自己倒腾的同学可以看下官方文档https://router.vuejs.org/zh/guide/advanced/lazy-loading.html。
首先，我们要安装一个插件，因为blade不识别webpack中的import(),导致无法分割。
npm install --save-dev babel-plugin-syntax-dynamic-import
cnpm也可以下载，下载完后我们在项目根创建一个.babelrc文件，里面写

{
  "plugins": ["syntax-dynamic-import"]
}

然后，把我们路由改成这样子

component: resolve=>require(["./components/index.vue"], resolve)

也就是把原来的

import 你的组件 from "./components/你的组件.vue"
component: 你的组件

改为
component: resolve=>require(["./components/你的组件.vue"], resolve)

这样就会把app.js压缩的非常小。

遇到坑的同学可以在下面分享，我们一起解决。
最后：如有错误，敬请指正，感激不尽