vue+laravel项目优化首页加载
0
最佳答案
0
1.打包js的时候分开打包.
2.可以把项目里的vue,vue-router等非业务代码采用cdn
3.如果还慢,首页可以采用骨架屏,压缩js等等.
收获园豆：40
其他回答(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>
