项目上线后和在开发和测试阶段对我们的要求其实有很大不同，在开发和测试阶段，我们可能是以完成需求任务为目标，因为有的时候作为开发者也不太清楚用户的具体诉求和交互习惯等，等项目上线真正到了用户手上，很多问题就开始暴露了。

最近线上给我提了个问题，首页长时间空白，在前端性能优化方面，这是最普遍的问题之一。上线了多家，就某一家提了，可能这家的要求比较高或网速比较慢，哈哈哈...

但问题既然提了，肯定是要解决的。先来看下现状。

首先，我们现在Chrome浏览器Network添加下节流方案，设为150吧，太小会导致每次测试加载时间太长，太快超过了本身的网速也没有意义。

这是Performance性能的截图，如下：

如下这张是Lighthouse的分析报告：

我们项目的框架结构是外层是主应用，内部的页面虽然是独立的工程，但是主应用通过qiankun来加载的。所以Lighthouse的性能分析报告不能完全分析出我们的问题，看Performance的分析图会更准确。

在子应用中，有很多组件是通过别的组打包的umd格式的js文件提供给我我们通过script标签引入的，我们通过在vue.config.js里面配置，让某自定义插件来合并配置的js和css文件及项目的app.js和chunk.js文件，而app.js基本是在最后的才加载的，而前面第三方库和本身项目的包如果很大，就会出现长时间页面空白了。这大体就是我们页面出现空白的原因了。

在我们上面大体分析了首页出现长时间空白的原因，第一个是引入的第三方js文件过大，然后是本身app打包生成的app.js和chunk.js也很大。

第三方文件

第三方js有点头疼，因为是别人提供的，不了解他们的业务和需求，不确认能不能优化，只能先优化自己这块。

当然可能通过script标签我们可以设置属性defer和async，但对我们来说不能用，因为我们业务就是要依赖于第三方组件，不仅仅是因为这个，还因为子应用没有用路由的懒加载，要不然app.js不至于打到同一个地方。其实，这是个很大的优化点，我们可以把子应用的全量加载改成通过路由懒加载，构建的时候也会根据路由分包，减少首页加载的资源过多。

而且，还有一点，如果第三方组件不是在首页必须展现的话，是否可以设置为defer，延迟展示，如果能这样，那首页渲染时间应该会大幅缩短。

还有一点，检查下是否有不必要的第三方文件，都要删了。

但有个问题，之前也说了，我们的第三方文件是配置的，通过自定义开发的插件来完成合并，如果要加上defer等属性的话，需要修改插件功能，需要协调插件开发者。

依赖包

首先package.json在本项目中不需要的都要删了，由于vue cli3默认对webpack的配置已经实现了tree shaking，所以对打出来的chunk.js并没有什么影响。

我们可以安装webpack-bundle-analyzer来分析下哪个文件比较大。

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}