webpack打包优化与首页白屏渲染问题【低性能移动端】解决方案

转眼间已经来到了2019年的6月份，我也已经实习半年多了，这半年尽管没有写过博客，但积累下来的经验还是不少的，日后慢慢补上

今天来讲讲的是webpack的打包优化经验，优化的角度从路由组件懒加载和常用库CDN引入两大块入手，至于nginx的Gzip还没有尝试过，后续尝试过再做补充【因为暂时手头上负责的项目都是在pad端上做的单机版应用.......】

1. 路由组件懒加载

这样在路由配置初始化时就不用一次全部加载完，按需加载，打包出来的app文件体积就不那么大

2. 常用库CDN引入

在vue中，vue、vue-router、vuex、elemen-ui等等的大型公共库一般要抽取出来的用CDN的形式去引入，这样能减少vender文件的体积。要让webpack不打包这些库，就要在externals中写入。

在webpack.base.conf.js中：

key是package.json里面的库名称，value是在项目中引入的名称

其中这里的element-ui是比较特别的，element-ui可以不在externals中写入，只要在CDN中引入CSS和JS文件即可，同时要把main.js文件中的导入和use去掉。下面放一下我的index.html文件中的CDN引入部分

还有些CSS文件就略过了，因为项目都是单机版的，要应对没有网的情况，所以都放在了静态文件目录。如果小伙伴要用CDN引入的话，对于版本锁定还是很有必要的。

公共库的抽取是必须要做的，因为差别非常大，下面是未抽取前的和抽取后的文件大小对比

打包之后

还有两者的vender文件大小：【差别真的大 - _ - !!】

 

另外要讲的大点是，在低性能移动端怎么去处理首页白屏问题

公司用的混合开发技术是cordova，所以速度是看整个页面在webview中的加载和渲染速度

公司采用的是板子性能比较差，Android版本也才只有4.0，每次打开应用真的是非常慢的，用公司板子的pad要8-9s才能完成首页渲染，在性能好的pad上可以做到3-4秒，但即使是3-4秒也是一个挺长时间的过程，而渲染时间也一定程度取决于文件加载速度。

首先，日后的优化方向毋庸置疑是从打包优化和自身工程文件的代码缩减上再优化

其次，我们要从文件加载和vue运行中但页面未渲染完成这一阶段入手

在所有的文件加载完之后，window.onload就会触发，所以，我的解决方案就是在文件加载完之前去展示一个加载中界面，待所有文件加载完之后就隐藏掉