單頁面應用首次進入時加載的文件較多，導致首屏渲染速度很慢。以下總結了一些解決單頁面應用首屏渲染慢的方式。
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替代。