首页 新闻 赞助 找找看

vue+laravel项目优化首页加载

0
悬赏园豆:40 [已解决问题] 解决于 2019-08-13 15:52

vue+laravel项目优化首页加载,首页加载速度比较慢,我看了一下是main.js加载时间过长,需要6、7秒!有谁知道怎么解决?

迷茫_D的主页 迷茫_D | 初学一级 | 园豆:182
提问于:2019-07-30 14:48
< >
分享
最佳答案
0

1.打包js的时候分开打包.
2.可以把项目里的vue,vue-router等非业务代码采用cdn
3.如果还慢,首页可以采用骨架屏,压缩js等等.

收获园豆:40
wings-lhw | 菜鸟二级 |园豆:366 | 2019-07-30 19:11
其他回答(1)
0

通过cdn减少压缩的选项
在laravel的==webpack.mix.js==文件中配置:

mix.webpackConfig({
plugins: [
],
externals: {//配置不打包的选项
'element-ui': 'Element',
'axios': 'axios',
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'vue-chartjs': 'VueChartJs',
'lodash': '_',
} })
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.styles(['node_modules/element-ui/lib/theme-chalk/index.css'], 'public/css/element-ui.css');
在blade文件中加入cdn
<head> ...
<script src="//upyun1.codercto.com/images/1x1.png" data-original="//cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>

<script src="//upyun1.codercto.com/images/1x1.png" data-original="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

<script src="//upyun1.codercto.com/images/1x1.png" data-original="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

<script src="//upyun1.codercto.com/images/1x1.png" data-original="//cdn.bootcss.com/element-ui/2.0.11/index.js"></script>

<script src="//upyun1.codercto.com/images/1x1.png" data-original="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>

<script src="//upyun1.codercto.com/images/1x1.png" data-original="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>

<script src="//upyun1.codercto.com/images/1x1.png" data-original="//unpkg.com/vue-chartjs@2.8.7/dist/vue-chartjs.full.min.js"></script>

<link href="https://cdn.bootcss.com/element-ui/2.0.11/theme-chalk/index.css" rel="stylesheet">

...

</head>

迷茫_D | 园豆:182 (初学一级) | 2019-07-31 17:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册