vue项目首屏加载慢解决方案

项目场景：

近期项目打包上线后,首屏加载速度太慢.记录一下优化的步骤;

---

解决方案：

一.开启Nginx压缩

参考知乎文章 vue-cli3项目开启gzip压缩 - 知乎

下图已经是 开启了 Nginx 进行 gzip压缩后的效果;依旧很慢.

二.屏蔽生产环境的source map

vue.config.js中设置:

 productionSourceMap: false,

三.echarts改为 CDN 引入 : 

从压缩体积图可以看出 echarts 占用的体积也很多; 所以先对echarts进行优化: 

1. 在public/index.html中 引入 :

  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.common.js"></script>

2. 在 vue.config.js 中 configureWebpack 配置 externals 

外部扩展(Externals) | webpack 中文文档

externals  : 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

 configureWebpack : 有2种写法,一种是函数式,一种是对象的形式(参考官网)

我司项目中使用的是函数式的写法,且vue/cli是使用的3.x版本,而3.x版本中没有externals 的配置项,所以需要使用新增属性的形式添加;代码如下 

 configureWebpack: config => {
    config['externals'] = {
      echarts: 'echarts'
    }
  },

3. 在vue组件中直接使用 echarts 即可. 

此时再来看 打包的体积 :        

---

对比之前小了大概2M多.再看上图中还有很多体积比较大的组件 同样可以采用上述方法改cdn加载.

---