vue单页应用首次加载太慢之性能优化

问题描述：

最近开发了一个单页应用，上线后发现页面初始加载要20s才能完成，这就很影响用户体验了，于是分析原因，发现页面加载时有个

vendor.js达到了3000多kb，于是在网上查找了一下原因，是因为我打包的时候把所有第三方依赖都打包放进去了；要怎么分离出去呢，

看下面步骤：

 

一、解决打包后vendor.js 很大，导致上线后页面首次加载速度异常慢：

vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。

解决方案：使用externals引用第三方资源，防止element资源被打包到自己项目中，(总共修改3个部分index.html、webpack.base.conf.js、main.js)

 

1、修改index.html页面，在head中引入cdn上的资源。

<!-- 正常的引入 cdn 资源即可 -->

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>

 

注意：上面是直接重cdn上引入的，如果某个时候cdn服务器出现问题，我们的项目就瘫痪了，所以为了安全起见要给自己留一手喔，

采用下面的方法，当上面的文件引入失败后，就从备用的地址引入；当然备用的地址你也可以换成本地的，我这里是放的另一个cdn服务器上的，

应该不会两个服务器同时出现故障吧！...

<!-- 引入 cdn 资源 -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
　　//<![CDATA[
　　if (typeof Vue == 'undefined') {
　　　　document.write(unescape("%3Cscript src='https://cdn.staticfile.org/vue/2.6.10/vue.min.js' %3E%3C/script%3E"));
　　} //]]>
</script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>
　　//<![CDATA[
　　if (typeof VueRouter == 'undefined') {
　　　　document.write(unescape("%3Cscript src='https://cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js' %3E%3C/script%3E"));
　　} //]]>
</script>
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
<script>
　　//<![CDATA[
　　if (typeof ELEMENT == 'undefined') {
　　　　document.write(unescape("%3Cscript src='https://cdn.staticfile.org/element-ui/2.10.1/index.js' %3E%3C/script%3E"));
　　} //]]>
</script>
<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>
<script>
　　//<![CDATA[
　　if (typeof echarts == 'undefined') {
　　　　document.write(unescape("%3Cscript src='https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts-en.min.js' %3E%3C/script%3E"));
　　} //]]>
</script>

 

 

2、修改webpack.base.conf.js文件.添加externals配置

externals: {

　　'vue': 'Vue',

　　'vue-router': 'VueRouter',

　　'element-ui': 'ELEMENT',

　　"echarts": "echarts",

},

 

3. 删除main.js中的相应import from。因为如果不删除，打包的时候还会把这两个文件打进去。

 

最后去打包，发现vendor.js只有300kb了。上线后发现页面首次加载飞快了。

 

下面再补充一些其它优化：

1、路由懒加载肯定是要做的：

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，

然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，

轻松实现路由组件的懒加载。具体实现方法官网和网上有很多例子，这里就不详细讲解了。

 

 

3、本地图片与请求的后台图片的大小：

在我这个项目中有很多图片，最开始没太在意图片的大小，导致上线后很多大的图片加载很慢，于是我把图片做了压缩处理；推荐个网站：

http://www.bejson.com/ui/compress_img/（压缩图片不失帧）；

当然我们也可以使用webpack里的插件对打包的图片进行压缩，也可以使用gulp.js里的插件对图片进行压缩。具体自己去百度吧...

 

4、打包后app.css过大：

我们可以把app.css做拆分，可以利用 webpack 中的 dll 做一部分的分割，比如第三方等的公用 css 文件。

然后再者可以利用 mini-css-extract-plugin 这个插件做各自模块的 css 文件提取（如果用的是webpack4）,

webpack3 的化可以用 extract-text-webpack-plugin。