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

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

主要思路是分为两点。

减少webpack打包体积，将不用修改的库用cdn引入。
使用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的大多是单页面应用)。修改为

<!DOCTYPE html>
<html>
<head>
	<title>Blog</title>
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<link href="{{ asset('css/app.css') }}" rel="stylesheet">
	
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">{{-- 新加的 --}}
	
</head>
<body>
	<div id="app">
	  <router-view></router-view>
	</div>
	
	<script src="https://cdn.bootcss.com/vue/2.5.7/vue.min.js"></script>{{-- 新加的 --}}
	<script src="https://unpkg.com/[email protected]/lib/index.js"></script>{{-- 新加的 --}}
	<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>{{-- 新加的 --}}
	
	<script src="{{ asset('js/app.js') }}"></script>{{-- 一定放在app.js前面 --}}
</body>
</html>

这是我的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压缩的非常小。

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

yhy1315

发布了31 篇原创文章 · 获赞 38 · 访问量 2万+

私信关注