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是在项目中引入的名称