1200字范文 > vue项目优化 - 网站首屏加载时间

vue项目优化 - 网站首屏加载时间

时间：2021-04-27 23:53:36

相关推荐

vue项目优化 - 网站首屏加载时间

文章目录

1. 首先打包后看看加载时间2. vendor2.1. 路由懒加载2.2. (@vue/cli < 3.0.0) map、gzip、console.log2.3. (@vue/cli < 3.0.0) CDN引入插件2.4. (@vue/cli 3.0) 2.2 及 2.3 在*vue/cli3.0*下的优化方案 3. Gzip服务器配置3.1 nginx重新编译3.2 nginx配置更改3.3 重启nginx3.4 结果 4. 静态文件及资源文件5. 打包分析6. 进阶

1. 首先打包后看看加载时间

示例：vue项目
vue-cli: v2.9 (v3.0.0以上配置不同)，之后用v4.1重构了项目
server: CentOS7, nginx

令人窒息的36.1s

先做点有手就会的吧，图片视频等静态资源是造成网站臃肿的首要原因，压缩static或public下的资源

记得先清除浏览器缓存

可以看到，还差得远

2. vendor

参考博文：关于vue 项目页面打包后首次页面加载特别缓慢的原因及解决方案

2.1. 路由懒加载

参见vue官方文档：Vue路由懒加载

import Vue from 'vue'import Router from 'vue-router'const _import = file => () =>import('@/views/' + file + '.vue');Vue.use(Router)export default new Router({routes: [{path: '/',name: 'home',component: _import('home') // @/views/home.vue文件},...}

2.2. (@vue/cli < 3.0.0) map、gzip、console.log

vue/cli 3.0以上的处理往下翻

去掉编译文件中map文件、使用gzip压缩、打包时去掉console.log

/config/index.js (@vue/cli < 3.0.0)

...build: {...productionSourceMap: false, // mapproductionGzip: true, // true 开启Gzip压缩}...

/build/webpack.prod.conf.js

坑：

先查看自己是否安装了依赖compression-webpack-plugin，没有需先安装：

npm install --save-dev compression-webpack-plugin

结果：

2.3. (@vue/cli < 3.0.0) CDN引入插件

webpack打包忽略插件，采用CDN方式引入

参考博文：Webpack如何引入CDN链接来优化编译后的体积

首先引入CDN链接到项目index.html，位置如下：

<body><div id="app"></div><script src="/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"><script src="/element-ui/lib/index.js"></script></body>

添加externals属性

vue-cli 2(webpack.base.confi.js):

module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},externals: {'vue': 'Vue','element-ui': 'ElementUI'},...}

注释main.js中的import

//import Vue from 'vue'//import ElementUI from 'element-ui';//import 'element-ui/lib/theme-chalk/index.css';//Vue.use(ElementUI);

看看效果吧：

vendor.js加载时间史诗级减少

2.4. (@vue/cli 3.0) 2.2 及 2.3 在vue/cli3.0下的优化方案

同2.3一样，CDN导入脚本（仅配置不同）

根目录下创建vue配置文件，vue.config.js配置如下：

const path = require('path')const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipExtensions = ['js', 'css']module.exports = {configureWebpack:{externals: {'vue': 'Vue','element-ui': 'ElementUI','axios': 'axios','xlsx': 'XLSX','echarts': 'echarts','vue-router': 'VueRouter'},plugins: [new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8}),new UglifyJsPlugin({uglifyOptions: {compress: {drop_debugger: true,drop_console: true,pure_funcs: ["console.log"]}},sourceMap: false,parallel: true})]},productionSourceMap: false}

3. Gzip服务器配置

上图中可以看到，

0.7ef6…js文件加载时间过长

2.1中已经压缩过了，但服务器的nginx配置尚未更改。

具体方法参考这篇博文：Vue cli 3.0 gzip压缩并部署到Nginx上(gzip_static)

3.1 nginx重新编译

本人服务器OS是Centos7, nginx安装在root/nginx-1.16.1下

cd到该目录下，更改配置：

./configure --with-http_gzip_static_module

重新编译安装nginx

make install

3.2 nginx配置更改

配置文件，(/usr/local/nginx/conf下)

http {...gzip on;gzip_static on;gzip_buffers 4 16k;gzip_comp_level 5;gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;...}