优化前的大小
1.图片优化
之前为了方便开法, 背景图片直接在 assets
里面扔了一个 jpg
, 导致加载这张图片的时候就用了十几秒, 于是乎我就把图片上传空间了, 然后改用网络地址。
2.禁止生成.map文件
build
出来的 dist
文件夹里面有很多的 .map
文件,这些文件主要是帮助线上调试代码,禁止生成这些文件.
在 vue.config.js
里面加上这句。
3.路由懒加载
4.cdn引入公共库
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
//cdn引入
configureWebpack: {
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
}
网上说可以把 import
注释掉,亲自操作会报错,也有资料说不用注释也不会打包。
一顿操作最后的文件,效果显著,app.js还是很大
5.终极法宝 GZIP压缩
做完这个感觉前四步都是小菜一碟,直接把 1.4m
的 app.js
干成一百多 kb
,其他的都不足挂齿了。
configureWebpack: config => {
return {
//配置cdn
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
},
//配置gzip压缩
plugins: [
new CompressionWebpackPlugin({
test: new RegExp('\.(js|css)$'),
threshold: 10240,
minRatio: 0.8
})
],
}
}
服务端也要配,不然不认识 GZIP
文件。
//配置GZIP压缩模块
const compression = require('compression');
//在所有中间件之前引入
app.use(compression());
最垃圾的服务器通过以上几个优化,一样飞起来了!!!
对比一下,结果显而易见!!!