vue提升加载速度的方法
Posted winter
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue提升加载速度的方法相关的知识,希望对你有一定的参考价值。
一、利用路由懒加载
1.安装插件npm install --save-dev @babel/plugin-syntax-dynamic-import
2.修改babel.config.js文件
module.exports = {
presets: [
\'@vue/app\'
],
"plugins": [
[
\'@babel/plugin-syntax-dynamic-import\'
]
]
}
3.vue.config.js增加如下配置,取消prefetch和preload
chainWebpack(config) {
config.plugins.delete(\'preload\')
config.plugins.delete(\'prefetch\')
}
二、压缩资源文件(vue 前端打包 chunk-vendors文件过大的问题)
1.安装插件(指定版本为@5.0.1,过高的版本会报错:Cannot read property \'tapPromise\' of undefined)
npm i compression-webpack-plugin@5.0.1
2.修改vue.config.js
const webpack = require(\'webpack\')
const CompressionWebpackPlugin = require(\'compression-webpack-plugin\')
const productionGzipExtensions = [\'js\', \'css\']
const isProduction = process.env.VUE_APP_ENV_NAME === \'production\'
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
algorithm: \'gzip\',
test: /\\.(js|css|less)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
minRatio: 0.8,
// deleteOriginalAssets: true // 删除源文件
})
],
},
}
3.后端配置nginx
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
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;
gzip_vary on;
gzip_disable "MSIE [1-6]\\.";
server {
listen 80;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
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;
gzip_vary on;
gzip_disable "MSIE [1-6]\\.";
root /usr/share/nginx/html;
location / {
# 用于配合 browserHistory 使用
try_files $uri $uri/ /index.html;
# 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
# rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent;
}
location /api {
proxy_pass https://preview.pro.loacg.com;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}
}
server {
# 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
listen 443 ssl http2 default_server;
# 证书的公私钥
ssl_certificate /path/to/public.crt;
ssl_certificate_key /path/to/private.key;
location / {
# 用于配合 browserHistory 使用
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass https://preview.pro.loacg.com;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}
}
以上是关于vue提升加载速度的方法的主要内容,如果未能解决你的问题,请参考以下文章