laravel中vue的压缩

发表于 | 分类于

通过cdn减少压缩的选项

在laravel的==webpack.mix.js==文件中配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

然后重新打包应用，最后生成的应用只有几十K了。
亲测将2.8M压缩为340K.效果很佳