VUE工程上线首页加载慢问题优化

    首先明确是什么导致加载很慢。查看控制台Network，找到加载时长很长的文件。这些文件都是npm run build编译之后生成的，加载慢一是因为网络慢，这个我们不考虑，另一个是文件过大。那么我们就要想办法压缩文件。

    在讨论压缩方式之前，我们先介绍一种可以查看各部分文件大小及编译后文件大小的方法。

    使用webpack-bundle-analyzer工具，先

    npm install cross-env --save-dev

  安装依赖包，然后在package.json的scripts中添加

   "analyze":"cross-env NODE_ENV=production npm_config_report=true npm run build"，如下图所示。

    之后执行npm run analyze就会在浏览器自动打开一个页面显示文件信息。

    每一块是一个编译文件及其所编译的源文件内容，最上方的文件是编译完成的文件，下面的其他文件就是此编译文件所编译的源文件，色块的大小代表文件大小，这样我们可以很直观地看出哪些文件比较大。

    下面介绍几种压缩文件的方式。

    1、vue-router懒加载

    懒加载的意思是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度。router/index.js路由懒加载格式如下。

 

    2、工程文件打包的时候不生成.map文件。

    npm run build编译之后，我们查看编译生成的文件，发现有很多.map文件，这些文件也占了不小的空间。.map文件的作用是帮助编译后的代码调试，但是我们上线的代码已经调试完成，所以上线时可以不生成.map文件。

 

在config/index.js中将productionSourceMap的值修改为false，就可以在编译时不生成.map文件了。

    3、gzip压缩

    这里我使用的是nginx服务器，找到nginx.conf文件目录，在配置文件中添加以下语句，即可实现gzip压缩。gzip的压缩效率极高，压缩代码必备。

 

    gzip_types后面的内容表示压缩文件的类型，需要把你要压缩的所有文件类型写上去，还要考虑文件类型支持问题。我就遇到了文件类型问题，一开始我并没有加入application/javascript，运行时发现文件并没有压缩，后来查阅资料尝试加入application/javascript就成功了。

    我们看到有很多javascript，application/x-javascript，application/ javascript，text/javascript，这几个的关系引用一位网友的解释，

 

    避免出现有些类型不支持的问题，我们最好把它们都配置上。

    4、CDN

    在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。

    5、VUE异步组件

    异步加载组件，减轻首页负担。

    参考：https://segmentfault.com/a/1190000012138052

    6、服务器端渲染

    我们现在都是采用浏览器端渲染的方式，如果将渲染放在服务器端，会大大提高加载速度。
    参考：https://segmentfault.com/a/1190000008795113