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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值