关于Vue项目优化首页打开速度

本文最后更新于：2022年12月19日 晚上

最近部署了一个Vue项目，但在测试时发现打开首页后，会花费很久的时间去加载CSS和JS文件，打开需要10s+。 所以寻找了一些优化方法。

一、Vue router懒加载

懒加载前：

1
2
3
4
import Login from "../components/Login.vue"
const routes = [
  { path: '/login', component: Login, meta: { title: '登录' },}
]

修改为懒加载后：

1
2
3
4
const Login = () => import('../components/Login.vue')
const routes = [
  { path: '/login', component: Login, meta: { title: '登录' },}
]

这种方法虽然可以把CSS和JS文件打包为很多个，但是vender文件依然很大。

懒加载方法比较适用于部分非首页页面过大的问题。

二、组件CDN加载

我的项目使用了Vue + element等。 如果把这些组件通过CDN加载，而不是打包为项目的文件，将会大大减小vender文件大小。

1、在vue.config.js中设置

1
2
3
4
5
6
7
8
9
10
module.exports = {
  /* 设置不打包 */
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT'
    }
  }
}

注：如果是其他组件，该如何设置？

例：

1
import Vue from 'vue'

则写法则是：

1
2
//from的部分在前，import的部分在后
'vue': 'Vue'

2、在main.js中设置

在main.js中将CSS文件注释掉，让他们通过CDN加载。

1
2
//import 'view-design/dist/styles/iview.css';
//import 'element-ui/lib/theme-chalk/index.css'

3、在index.html中引入CDN

1
2
3
4
5
6
7
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/iview@3.5.4/dist/styles/iview.css">


<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>

三、优化效果

在结束优化后，vender文件大小都缩小到了80kb，其中CSS文件大小都只有几kb。 根据加载的waterfall，加载时间在2s左右，加载瓶颈在CDN的速度，比起之前的10s+已经有了很大的优化。