vue 首屏加载慢的问题

https://www.cnblogs.com/myfirstboke/p/11321191.html

项目遇到的问题总结（四）：单页面首屏加载慢解决方案

 

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加速优点是成本低，速度快。适合访问量比较大的网站