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, // 只有大小大于该值的资源会被处理 10240minRatio: 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的资源会被压缩，默认为0minRatio: 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; #查找静态文件,删除源文件后需要添加}}
}