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才是影响包体积原因