Vue SPA首屏优化方案

Vue SPA首屏优化方案

Vue打包后如何提高页面加载的速度，优化方案有哪些？

1. 按需引入

使用ES6 module进行按需引入

1. • 路由文件按需引入组件
2. • 静态模块按需引入组件模块，如Element-ui

3. 图片资源的压缩，icon资源使用sprite图

4. 开启gzip压缩。前端配置compression-webpack-plugin来进行gzip压缩，服务端使用nigix开启gzip

5. CDN加速，静态资源上传到CDN，可以极大的提高访问速度

6. 入口chunk优化，拆分入口chunk文件，分离出一些静态的库，比如elment-ui，既可以加速打包，也可以加速加载；在webpack的externals里配置相关的分离的第三方资源库，其中key是依赖包名称，value是源码抛出来的全局变量。