vue 首屏加载慢的问题

你的名字 2023-02-27 03:24 129阅读 0赞

## [https://www.cnblogs.com/myfirstboke/p/11321191.html][https_www.cnblogs.com_myfirstboke_p_11321191.html] ##

## [项目遇到的问题总结（四）：单页面首屏加载慢解决方案][https_www.cnblogs.com_myfirstboke_p_11321191.html] ##

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

百度之后，才发现菜鸡

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

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

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

![format_png][]

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

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

![format_png 1][]

![format_png 2][]

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

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

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

![format_png 3][]

去掉.map文件之后的js文件夹![format_png 4][]

在下一步:

vue-router 路由懒加载

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

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

懒加载配置：

非懒加载路由配置：（平时我都是这么写的，艹原来是不标准的写法）

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

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

![format_png 4][]非懒加载打包后

![format_png 5][]

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

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

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

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

![format_png 6][]

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

// 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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![format_png 7][]

这几个英文

stat size（统计尺寸）

parsed size（解析大小）

Gzipped size（压缩大小）

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

\# cdn引入插件

\# 打包时使用Gzip

没解决之前是![format_png 8][]

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

先来试一下压缩，

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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
        })
      )

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

使用CDN加载

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

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

\*\*\*\*\*\*\*\*\*\*\*cdn\*\*

![format_png 9][]

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

解决方法

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

![format_png 10][]

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

![format_png 11][]

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

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

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

亲自测试一下

![format_png 12][]

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

![format_png 13][]

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

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

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

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

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

[https_www.cnblogs.com_myfirstboke_p_11321191.html]: https://www.cnblogs.com/myfirstboke/p/11321191.html
[format_png]: /images/20230209/2978edd9c7024e0b9bb9c47b047a8952.png
[format_png 1]: /images/20230209/0d85615744414130a90e5da6314e1238.png
[format_png 2]: /images/20230209/07cb9283ba984edfa79168a5e941ebde.png
[format_png 3]: /images/20230209/fd17a9a4afdd4627a89c4db2d6ca6977.png
[format_png 4]: /images/20230209/43b398c3e559449bb1fc55284ad2f34e.png
[format_png 5]: /images/20230209/887a1e91c41e4164b29617ea566da4c7.png
[vue]: https://www.cnblogs.com/shifeng-/p/10790095.html
[format_png 6]: /images/20230209/14dd81b236664614a2f23de88faf0a9f.png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230209/c9b6408b03e6431da7555486edeb6033.png
[format_png 7]: /images/20230209/9d8eb54e817a435e9f0753f5bcedcd5a.png
[format_png 8]: /images/20230209/a8dff14cd8734a738e28efe44cba90a3.png
[format_png 9]: /images/20230209/90aa2a57dabf4a5a90fcf8b8e97f57b2.png
[format_png 10]: /images/20230209/860689e454044a61a8c95cfb332b5d53.png
[format_png 11]: /images/20230209/cf0a85caf3894658adc9edd3c82d9c71.png
[format_png 12]: /images/20230209/9e81a00f115644749937f45c200d58ba.png
[format_png 13]: /images/20230209/46a416d384c8440980775ed4c4c0bdaf.png