项目开发接近尾声,优化是不可忽略的,下面来说说我对项目的优化之路:
开发环境:使用vue-cli安装项目
"vue": "^2.4.2",
"vue-router": "^2.7.0",
"webpack": "^3.5.5",
"node": "8.12.0",
一 基础优化:
路由按需加载、图片的懒加载、cdn地址引用,不多说了,直接上图:
1、*部分路由按需加载;
2、cdn地址引用:
3、然后在 webpack.base.conf.js 中 externals部分配置:
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios':'axios',
'element-ui': 'ElementUI',
}
4、然后安装 "uglifyjs-webpack-plugin": "^1.3.0" 插件
安装可参考 https://www.cnblogs.com/soraly/p/10112685.html
运行 npm run build
结果:
vendor.js 由原来的 5M 降低到了 1M左右
app.js 由原来的2.5M 压缩到了 765kB
还是有很大的效果
二、进一步优化:
1、进行 gzip压缩和服务器如何开启gzip
具体安装参考 https://blog.csdn.net/u013788943/article/details/79786558
compression-webpack-plugin 参考 http://www.hehaibao.com/vue-cli-webpack-gzip-error/
执行 npm run build
结果如下:
vendor.js 由原来的1016KB 压缩到了 347KB 左右
app.js 由原来的765kB 压缩到了199KBkB
index.css 由原来的 250KB 压缩到了 46.2KB
效果还是很明显的··················