关于webpack打包 js、css 压缩优化总结

项目开发接近尾声，优化是不可忽略的，下面来说说我对项目的优化之路：

开发环境：使用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

效果还是很明显的··················