vue首屏加载慢的解决方案
单页面应用首次进入时加载的文件较多，导致首屏渲染速度很慢。以下总结了一些解决单页面应用首屏渲染慢的方式。
1、路由懒加载
a）、require
/* vue异步组件技术 */ { path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },{ path: '/index', name: 'Index', component: resolve => require(['@/components/index'],resolve) }
b）、import
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。 const Index = () => import('@/components/index') const About = () => import('@/components/about') */ // 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块 const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')）
c）、require.ensure(dependencies: String[], callback: function(require), chunkName: String) 多个路由指定相同的chunkName，会合并打包成一个js文件。
/* 组件懒加载方案三: webpack提供的require.ensure() */ { path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') }, { path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') }
2、多入口
vue多入口： https://www.jianshu.com/p/00b51e4e2b2e
3、压缩代码并移除console
使用UglifyJsPlugin 插件来压缩代码和移除console。
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, pure_funcs: ['console.log'] }, sourceMap: false })
4、使用cdn引入第三方库、静态资源oss减小服务器压力
Vue 全家桶以及 ElementUI 仍然占了很大一部分 vendors 体积，这部分代码是不变的，但会随着每次 vendors 打包改变 hash 重新加载。我们可以使用 CDN 剔除这部分不经常变化的公共库。我们将vue，vue-router，vuex，axios，jquery，underscore，使用CDN资源引入。国内的CDN服务推荐使用https://www.bootcdn.cn/
首先我们要在 index.html 中, 添加 CDN 的相关代码
<html>
...
<link href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.4/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
</body>
</html>
在 vue.config.js 中加入 webpack 配置代码
configureWebpack: { externals: { 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'element-ui': 'ELEMENT', 'axios': 'axios', 'underscore' : { commonjs: 'underscore', amd: 'underscore', root: '_' }, 'jquery': { commonjs: 'jQuery', amd: 'jQuery', root: '$' } }, }
去除 vue.use() 相关代码
需要注意的是，通过 CDN 引入，在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上，因此不再使用Vue.use(xxx)
也不在需import Vue from ‘vue’, import VueRouter from ‘vue-router’ 等。
剔除全家桶和Element-ui等只有，剩下的需要首次加载 vendors 就很小了。
使用 CDN 的好处有以下几个方面
（1）加快打包速度。分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。
（2）CDN减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。
5、开启gzip
- 首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true
- 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：
npm install --save-dev compression-webpack-plugin //(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本 npm install --save-dev compression-webpack-plugin@1.1.11
- 3.等安装好了，重新打包 npm run build ，此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢，之后项目访问的文件就是这个.gz文件
6、关闭sourceMap
即在config/index.js中将productionSourceMap的值修改为false，就可以在编译时不生成.map文件了
7、使用更轻量级的工具库
moment是处理时间的标杆，但是它过于庞大，我们可以使用day.js替代。
