Vue - 缩短网页首次进入加载时间

最新推荐文章于 2024-04-22 10:29:24 发布

无名X

最新推荐文章于 2024-04-22 10:29:24 发布

阅读量255

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/hwc3737/article/details/109086920

版权

Vue项目 - 性能优化

优化效果：加载速度提升70%~80%

原文链接：https://blog.csdn.net/hwc3737/article/details/109086920

①使用CDN方式引入相关外部js库

知识补充：

CDN 的全称是 Content Delivery Network，即内容分发网络。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

⭐注意：此方式为上线前的可选优化，且无需特意卸载原安装的相关库。

举例：cdn方式引入elementUi和echarts

1）在index.html文件中添加引入：

//以下方式为引入最新版本的资源，为避免后续出现版本问题，可自行替换为合适的版本对应的cdn外链

//<head>标签中引入element-ui样式
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />

//<body>标签中引入vue、element-ui和echarts
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2）找到 vue.config.js，添加 externals 使 webpack 不打包 vue 、element 和 echarts：

configureWebpack: {
  name: name,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  },
  //以下为添加的部分
  externals: {
    "vue": "Vue",
    "element-ui": "ELEMENT",
    "echarts": "echarts"
  }
  //以上为添加的部分
},

②使用Gzip优化加载速度

#服务器配置：

1）对Nginx进行配置，在server中添加：

// nginx开启gzip服务
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_static on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
// 需要开启gzip的格式
gzip_types text/plain text/css application/json application/x-javascript text/xml 
  application/xml application/xml+rss text/javascript image/jpeg image/gif image/png image/jpg;

2）重启Nginx，完成

#Vue项目配置：

⭐注意：以下配置的适用范围为 vue-cli3 及以上版本

1）安装插件：

npm i -D compression-webpack-plugin

2）配置webpack：

找到 vue.config.js 文件，添加引入:

//gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin')

在同一文件下找到对应位置并添加：

configureWebpack: {
  name: name,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  },
  //以下为添加的部分
  plugins: [
    new CompressionWebpackPlugin({
      test: /\.js$|\.html$|\.css/,
      threshold: 10240,
      deleteOriginalAssets: false
    })
  ]
  //以上为添加的部分
},