vue-webpack代码混淆、代码压缩设置

package.json

"dependencies": {
    "webpack": "^4.41.3" // webpack版本
    "webpack-obfuscator": "^2.6.0" // 代码混淆版本
    "compression-webpack-plugin": "6.1.1", // 代码压缩版本
}

webpack.config.prod.js

const JavaScriptObfuscator = require('webpack-obfuscator');
const CompressionPlugin = require('compression-webpack-plugin');
config: {
  ...
  plugins: [
    // 代码混淆
    new JavaScriptObfuscator({
      // 压缩代码
      compact: true,
      // 关键字转义
      unicodeEscapeSequence: true
    }, []),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),//该插件能够使得指定目录被忽略，从而使得打包变快，文件变小
    new CompressionPlugin({
      filename: "[path][base].gz", // 有的版本是[path].gz[query] 根据情况而定
      algorithm: "gzip",
      test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
      threshold: 10240, // 只有大小大于该值的资源会被处理 10240
      minRatio: 1, // 只有压缩率小于这个值的资源才会被处理
      deleteOriginalAssets: true, // 删除原文件，如果删除源文件nginx中需要额外配置资源目录
    }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 5, //控制打包生成js的个数
      minChunkSize: 100
    })

  ],
}

代码混淆 JavaScriptObfuscator

详情 JavaScript Obfuscator Tool 可以在这个网站测试自己需要的混淆方式

  plugins: [
    // 代码混淆
    new JavaScriptObfuscator({
      // 压缩代码
      compact: true,
      // 关键字转义
      unicodeEscapeSequence: true
    }, []),
  ],

代码压缩 CompressionPlugin

  const productionGzipExtensions = ["js", "css"];  
  plugins: [
    new CompressionPlugin({
      filename: "[path][base].gz", // 有的版本是[path].gz[query] 根据情况而定
      algorithm: "gzip",
      test: /\.(js|css)(\?.*)?$/i,
      // threshold: 10240, 只有大小大于10K的资源会被压缩，默认为0
      minRatio: 1, //默认为0.8，能压缩到小于等于原来的80%才压缩
      deleteOriginalAssets: true, // 删除原文件，如果删除源文件nginx中需要额外配置资源目录
    }),
  ],

代码压缩后Nginx配置

压缩为gz包后，是否删除源js文件，如果设置为true nginx需要额外配置资源文件目录

http {
    ....

	gzip on; # 开启gizp文件支持
    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;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:/workspace/dmp/dmp-service/dolphinscheduler-ui/dist;
            index  index.html index.htm;
            gzip_static on; #查找静态文件,删除源文件后需要添加
        }

    }
}