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的大多是单页面应用)。修改为




	Blog
	
	
	
	{{-- 新加的 --}}
	


	
{{-- 新加的 --}} {{-- 新加的 --}} {{-- 新加的 --}} {{-- 一定放在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压缩的非常小。

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

你可能感兴趣的:(vue,vue,webpack,larvale,element)