vue 项目性能优化

vue性能优化

参考链接：

https://www.jianshu.com/p/0c05faee0975（打包分析软件）

https://blog.csdn.net/qq_37818095/article/details/94616497(前端性能分析)

https://github.com/PanJiaChen/vue-admin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177（cdn引入）

https://blog.csdn.net/qq_38652871/article/details/88060115(cdn资源库)

https://www.jsdelivr.com/

https://www.jianshu.com/p/a64735eb0e2b

1. webpack打包大小优化（减少首屏加载时间）

通常的方法有：

• 使用路由懒加载
• cdn方式引入资源包
• 按需加载
• webpack打包压缩，并在nginx中做配置
• 图片压缩

1. 准备工作，性能分析：
1. 首先我们需要一些指标参数分析项目性能，在index.html中加入以下代码

 window.onload = function () {
      setTimeout(function () {
        let t = performance.timing
        console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
        console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
        console.log('request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0))
        console.log('解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0))
        console.log('白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0))
        console.log('domready时间 ：' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
        console.log('onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0))
        if (t = performance.memory) {
          console.log('js内存使用占比 ：' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
        }
      })
    }

 

2. 安装webpack-bundle-analyzer插件分析打包文件

// 安装
npm install webpack-bundle-analyzer –save-dev
//在build/webpack.prod.config.js中的module.exports = webpackConfig这句话的上面增加
if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
// 使用
npm run build --report

ps： 这里我们可以看到打包后的文件，echart和element-ui占了很大一部分。我们可以通过按需加载和cdn 引入的方式来减小打包后dist文件大小。

3. 路由懒加载

实现方式https://blog.csdn.net/xm1037782843/article/details/88225104。

4. cdn引入element-ui和echarts
1. 在index.html中引入

<script src="https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js"></script>
  <!-- 注意引入elemen-ui前要先引入vue,其使用了Vue对象 -->
  <script src="https://unpkg.zhimg.com/vue@2.5.2/dist/vue.min.js"></script>
  <!-- 不引入css样式 -->
  <script src="https://unpkg.zhimg.com/element-ui@2.7.2/lib/index.js"></script>

ps:cdn引入需要注意cdn地址，有些cdn地址很慢比如unpkg.com是国外的地址，可以使用unpkg.zhimg.com这个是国内的镜像。

2. 在main.js中把import elementui from 'element-ui' 和 Vue.use(elementui)注释掉，echarts同样，如要使用Vue.prototype.$echarts = echarts 的话可以不注释，不用担心没有这个变量，cdn引入中echarts就是全局变量
3. 我们还需在webpack.base.conf.js中配置externals，如图。注意后面的属性值，是该资源包暴露出来的全局变量

5. 开启打包压缩，并在nginx中配置支持。

https://www.jianshu.com/p/26849b857dce

• npm install --save-dev compression-webpack-plugin@1.1.12（通常最好使用低版本）
• 在webpack.prod.conf.js中配置,config.build.productionGzip是控制是否要压缩的开关

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')




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

• nginx中配置

server {
        listen       8103;
        server_name  ************;
		# 开启gzip
	    gzip on;
	    # 进行压缩的文件类型。
	   	gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	    # 是否在http header中添加Vary: Accept-Encoding，建议开启
	    gzip_vary on;
}

 

待更新...