vue前端项目优化方案

部署环境
@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;
    }
  }
}

 

无用包去除

npm install -g depcheck 项目中运行 depcheck 即可
下面才是重点 这里检查只是为了减少npm i的工作量

Unused dependencies

• driver.js
• print-js
• react-scripts
• showdown

// 这里我建议别动尤其ts项目
Unused devDependencies

• @vue/cli-plugin-babel
• @vue/cli-plugin-eslint
• @vue/cli-plugin-unit-jest
• @vue/test-utils
• autoprefixer
• babel-core
• babel-eslint
• html-webpack-plugin
• node-sass
• sass-loader
• script-ext-html-webpack-plugin
• serve-static
• svg-sprite-loader

//下面才是重点 找出src下面无用的vue文件或者无用的引用 删除才能减少打包体积

Missing dependencies

• husky: ./package.json
• qs: ./src/utils/http.js
• lodash: ./src/utils/http.js
• clearfix: ./src/styles/mixin.scss
• scrollBar: ./src/styles/mixin.scss
• relative: ./src/styles/mixin.scss
• pct: ./src/styles/mixin.scss
• direction: ./src/styles/mixin.scss
• if: ./src/styles/mixin.scss
• triangle: ./src/styles/mixin.scss
• tui-editor: ./src/components/MarkdownEditor/index.vue
• body-parser: ./mock/mock-server.js

注意：package.json的无用依赖去除不会减少打包体积，src下的无用 import才是影响包体积原因