Vue项目优化心得分享

 

开篇

  本该继续更新【探究Vue原理】系列文章的，但今天我怀着激动的心情打算和大家分享下有关Vue项目优化的一点心得。
  先说下我遇到的问题。手上的项目目前虽然只完成了三分之二，但已经有100多个页面，和20多个公共组件了。在调试环境下，代码大小高达20.4MB！build之后经过压缩为2.24M。要知道，我的项目中是不包含任何静态资源的，这是20多M是纯代码的大小。在服务器带宽并不高的情况下，我打开首页竟然需要1分半！项目优化刻不容缓，下面分享我的实际优化步骤。

 
 

环境

我的项目是使用cli3的默认配置创建的。
Vue版本为2.6.10
其他插件版本如下：
@vue/cli-plugin-babel": “^3.8.0”,
@vue/cli-plugin-eslint": “^3.8.0”,
@vue/cli-service": “^3.8.0”,

 
 

异步组件

  首先确定问题出在哪里。（之后的操作全部是在调试环境下进行的）
  使用Chrome打开我的网站，按12调出控制台，并在最顶部选项卡中选择Network。F5刷新首页之后，Network会记录各个资源的基本信息与占用带宽的情况，在这一步我发现app.js文件有足足20MB大小。那么问题很明显了，几乎全部代码都在app.js这一个资源包里面，因此我首先要做的事情就是对各个组件分开打包。
  我的打包工具是默认的webpack，浏览Vue的文档之后我发现异步组件可以很好的满足分别打包的需求。异步的用法很简单，我们只需要将项目中某些地方的import xxx from xxx 改为 ()=>{import(‘xxxx’)}即可。
 

Q：某些地方究竟指哪里？什么地方需要使用异步组件？

  项目中但凡是使用import xxx from xxx 这个语法引入的代码都会被webpack编译到app.js这个包里面。而app.js这个包在我们打开网站的那瞬间就会被’第一个’下载，因此，对于我的项目来说，只有项目的基本框架和首页才需要使用import xxx from xxx来引入，其他所有资源都应该使用()=>{import('xxxx')}

   以我的项目为例，下面截图是我项目的home页。我在打开当前大家看到的这个页面的时候，除了顶部工具条、左侧导航条和首页以及一些公共基础组件之外不再需要加载其他任何一个组件了。而将来要创建的每一个tab都应该是动态加载的。也就是说，只有当用户点击菜单按钮之后对应页面的组件才应该被下载。说白了，就是上述那几个组件应该被放在app.js中，而其他页面应该每个页面单独存放在一个包中(一个包对应一个js文件)。

具体实现方式很简单，顶部工具条和菜单这些组件仍然使用