laravel+vue优化vue单文件过大 app.js过大
博主最近在写laravel+vue+element的一个项目,因为不是很了解webpack所以踩了不少坑,其中就有vue单文件过大问题,于是在这里记录下解决方法。主要思路是分为两点。减少webpack打包体积,将不用修改的库用cdn引入。使用vue-router路由懒加载1.cdn引入cdn引入不需要修改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/element-ui@2.4.6/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/element-ui@2.4.6/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压缩的非常小。
遇到坑的同学可以在下面分享,我们一起解决。
最后:如有错误,敬请指正,感激不尽
更多推荐
所有评论(0)