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

问题描述：

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

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

看下面步骤：

 

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

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

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

 

一、修改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>

 

 

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

externals: {

　　'vue': 'Vue', 　　'vue-router': 'VueRouter', 　　'element-ui': 'ELEMENT', 　　"echarts": "echarts", },

 

3. 删除main.js中的相应import from。由于若是不删除，打包的时候还会把这两个文件打进去。

 

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

 

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

一、路由懒加载确定是要作的：

当打包构建应用时，Javascript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，

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

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

 

 

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

在我这个项目中有不少图片，最开始没太在乎图片的大小，致使上线后不少大的图片加载很慢，因而我把图片作了压缩处理；推荐个网站：

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

固然咱们也可使用webpack里的插件对打包的图片进行压缩，也可使用gulp.js里的插件对图片进行压缩。具体本身去百度吧...

 

四、打包后app.css过大：

咱们能够把app.css作拆分，能够利用 webpack 中的 dll 作一部分的分割，好比第三方等的公用 css 文件。

而后再者能够利用 mini-css-extract-plugin 这个插件作各自模块的 css 文件提取（若是用的是webpack4）,

webpack3 的化能够用 extract-text-webpack-plugin。