vue前端项目优化方案

最新推荐文章于 2024-09-15 23:59:26 发布

我叫小魏子。

最新推荐文章于 2024-09-15 23:59:26 发布

阅读量646

点赞数 25

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_41618917/article/details/125759881

版权

部署环境
@vue/cli 4.5.13 、nginx、 dockerfile、 k8s CI\CD 本次针对的是vue
cli脚手架进行webpack相关的配置, 包含到nginx 和dockerfile

一、包体积优化

分隔js  

代码分隔出来的js文件名 /* webpackChunkName: "register" */     {
    path: '/401',
    component: () => import(/* webpackChunkName: "401" */'@/views/error-page/401'),
    hidden: true   },

 配置打包名字
 
configureWebpack: {
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: './static/js/[name].js',
      chunkFilename: './static/js/[name].js'
    }
}

没有用到hash，固定名字下面需要配合缓存解决，css本来想用插件但是用了更简单的方案
css也配置去掉hash，上面的 output 配置也可以去掉看个人要求

支持GZIP

安装 compression-webpack-plugin  npm i compression-webpack-plugin -D
 
// 顶部加入
const CompressionPlugin = require('compression-webpack-plugin')


 configureWebpack: {
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: './static/js/[name].js',
      chunkFilename: './static/js/[name].js'
    },
    // GZIP
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/, // 匹配文件名
        threshold: 81920, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
        minRatio: 0.8 // 压缩比
      })
    ]
// ........其他的配置
}

一半的人会报错： ERROR TypeError: Cannot read property ‘tapPromise’ of
undefined 最后发现是是compression-webpack-plugin版本问题，
compression-webpack-plugin 默认安装的是 7 版本的先执行卸载命令->npm uninstall
compression-webpack-plugin 执行安装命令->npm i
compression-webpack-plugin@5.0.1 -D

缓存问题解决

nginx配置协商缓存，加入一下配置
gzip_static on;
 add_header Cache-Control no-cache;  
 
user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  gzip_static on;
  server {
    listen       80;
    server_name  localhost;
    add_header Cache-Control no-cache;
    location / {
      add_header Cache-Control no-cache;
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

无用包去除