前端优化之路：构建、打包速度提升

【前言】

《闻香识女人》中有句经典台词，“有些人一分钟过尽一生”，多少人在等待中浪费了生命的美好。同样，如果一个项目构建、热更新、打包速度过慢，中途需大把时间去等待，那么不免让人抓狂。

 

【效果展示】

优化前，构建速度

 整整126秒，两分多钟过去后，项目才启动成功

 

 

优化后，构建速度

21秒运行完毕，仅用以前16%的时间，节约80%以上，过程不再枯燥、冗长。

 

 

优化前，打包速度

由于过程过久，不得不另外用计时器

 

 

优化后，打包速度

20秒打包结束，仅用了15%的时间，速度显著提升

 

 

再看下当前的热更新速度

0.3秒，修改文件或内容后，可以瞬间同步最新视图，同样节约了等待时间

 

 

【优化工作】

前面直观展示了优化前后结果对比图，现在就该讲讲优化过程

首先，我想到了压缩代码，webpack有提供plugin，先引入

 

再去vue.config.js里配置

 

除了压缩，还不够，还需要分包 + 缓存

 

最后，再将全局引入的sass样式处理一下

需安装style的loader，将全局性的样式注入到如css, sass, scss, less, stylus等模块中；

安装style-resources-loader、vue-cli-plugin-style-resources-loader后，就可以去webpack里配置了

 

 

到这里，优化过程就结束了，以后再也不用盯着进度条祈祷了