vue前端項目優化

本次針對的是vue cli腳手架進行webpack相關的配置, 包含到nginx 和dockerfile

部署環境 

@vue/cli 4.5.13  、nginx、 dockerfile、 k8s CI\CD

 一、包體積優化

分隔js

代碼分隔出來的js檔案名  

{
    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 [email protected] -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才是影響包體積原因