代码改变世界

项目遇到的问题总结(四):单页面首屏加载慢解决方案

2019-08-08 15:01  WEB前端小菜鸟  阅读(5840)  评论(0编辑  收藏  举报

 

VUE  单页应用首页加载特别慢的解决方法,(我自己没百度之前,想的是路由懒加载,图片懒加载,压缩cssjs)

百度之后,才发现菜鸡

我们一般打包后把 生成的dist文件夹下面的这两个东西拖到服务器下面就行了

首先你要想到拖到服务器,减少这个文件的体积,看他的构造,index.html没发变小了才1kb;

就要在static里面下文章了,打开static,

打开js,可以看到,里面有许多.map文件,而且很多都很大,如图最后一个3M多,map文件是什么鬼?这些文件主要是帮助我们线上调试代码,查看样式。所以为了避免部署包过大,通常都不生成这些文件。

意思就是有了map文件我们就会知道比如报错是哪个页面报的错,console.log就能打印出来具体的第几行数据

 

 如图所示,说白了就是起一个辅助调试的作用,一般线上不需要这个.map文件,所以为了避免部署包过大,通常都不生成这些文件。

在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件

 

没去掉之前static是6.26M大小去掉之后是1.89M  我擦这尼玛减少这么多;

去掉.map文件之后的js文件夹

 

在下一步:

vue-router 路由懒加载

懒加载即组件的延迟加载,通常vue的页面在运行后进入都会有一个默认的页面,而其他页面只有在点击后才需要加载出来。

使用懒加载可以将页面中的资源划分为多份,从而减少第一次加载的时候耗时。

懒加载配置:

非懒加载路由配置:(平时我都是这么写的,艹原来是不标准的写法)

 

 

 路由懒加载打包后static-->js文件夹

如图所示为通过非懒加载和懒加载后打包的js文件。而非懒加载的打包后一般只有一个app.js 文件。

非懒加载打包后

这个1-10.js就相当于你的10个路由对应的文件我是这么理解的哈(使用路由的按需加载,可把app.js分隔成多个小的js文件)

注意这个vendor.js文件很大这个怎么搞?每次打开会发现这个js很耗时,它是项目所有依赖的集成(包括vue vue-router axios echarts ele等)

vendor.js一般是将所有引用的库打包在了一起,首先就需要确定是哪些库文件太大,可以参考 vue打包优化分析工具,其实这个插件没啥用(装逼用的)

如下图你打包完成之后,哪些文件大 有个big提示

 

 

// 1. 安装
cnpm install webpack-bundle-analyzer --save-dev

// 2. 在/build/webpack.prod.conf.js文件中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 然后配置一下:
plugins: [
    new BundleAnalyzerPlugin()
]

// 3. 在package.json文件中配置:
"scripts": {
    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
}

// 4. 运行(会自动在浏览器打开:http://127.0.0.1:8888/)
npm run build

然后就会出现一张类似这样的图片

这几个英文

stat size(统计尺寸)

parsed size(解析大小)

Gzipped size(压缩大小)

vendorjs中是项目中所有引用的依赖包,即使用的vue、eleui、axios、echarts等等插件框架什么的都在这里边。解决办法

  # cdn引入插件

  # 打包时使用Gzip

 没解决之前是

现在来解决它看能不能变小

先来试一下压缩,

webback.prod.config.js 中添加如下代码。(文件大小 10.5MB-->3.5MB)

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      // deleteOriginalAssets:true, //删除源文件
      minRatio: 0.8
    })
  )

使用CDN加载

通过在index.html 中直接引入第三方资源来缓解我们服务器的压力,其原理是将我们的压力分给了其他服务器站点。

 

包后需要去掉代码中的console.log ,防止打开f12 的时候输出日志(可webpack配置也可以手动删除)

 

 ***********cdn**

我这个项目小所以vendeor 请求响应时间少,别个项目大的情况下 这个文件请求响应时间就长了如上图5秒,这是要死人的,慢

解决方法

1、这里我们把import导入的方式删掉

2、通过cdn方式去引入import需要导入的库(我们不是不用import,而是换了另一种方式去引入,这样可以减轻vendor.js的负担)

3、这一步配置非常重要,我们在目录build/webpack.base.conf.js文件中配置externals

externals(翻译:外部环境)的作用是从打包的bundle文件中排除依赖。

换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去,而是通过script(CDN)的方式去访问这些依赖。

 亲自测试一下

 

我这里把vue 用上面的方法引入,快一点点(这个我刷新的时候又是100多,还与他妈的网速有关我擦)

  

 

总结一下就是:1去掉map文件 2 路由懒加载 3 压缩文件  使用cds加载 4去掉console.log(其实这个不算吧) 

这里又发现一个问题  cdn 卧槽我一直不是很理解cdn,求解百度

 

CDN的全称是Content Delivery Network,内容分发网络

CDN加速简单的来说,就是把原服务器上数据复制到其他服务器上,用户访问时,哪台服务器近访问到的就是哪台服务器上的数据。

CDN加速优点是成本低,速度快。适合访问量比较大的网站

参考:https://www.cnblogs.com/xidian-Jingbin/p/10643391.html

https://www.cnblogs.com/shifeng-/p/10832022.html

https://blog.csdn.net/qq_35610214/article/details/93645771

 这里还有一种解决vendeor 。js的方法(扩展)

https://blog.csdn.net/blueberry_liang/article/details/80320607