• webpack打包vue项目添加混淆方式，解决缓存问题

     方法一

     添加依赖

    npm i --save uglifyjs-webpack-plugin

    vue.config.js引入方法

    const UglifyPlugin = require("uglifyjs-webpack-plugin");

    首先设置环境变量

    在脚本中设置
    NODE_ENV=development 测试环境
     cross-env NODE_ENV=development vue-cli-service serve

      "scripts": {

        "serve": "cross-env NODE_ENV=development vue-cli-service serve",

        "v1": "cross-env NODE_ENV=development vue-cli-service serve --mode v1",

        "wis": "cross-env NODE_ENV=development vue-cli-service serve --mode wis",

        "build": "cross-env NODE_ENV=production vue-cli-service build",

        "build:wis": "cross-env NODE_ENV=production vue-cli-service build --mode wis",

        "build:v1": "cross-env NODE_ENV=production vue-cli-service build -mode v1",

        "lint": "vue-cli-service lint"

      },

    设置vue.config.js配置 

    函数方式  
    configureWebpack: (config) => {

        console.log(process.env.NODE_ENV);

        if (process.env.NODE_ENV == "production") {

          // 将每个依赖包打包成单独的js文件

          let optimization = {

            minimizer: [

              new UglifyPlugin({

                uglifyOptions: {

                  warnings: false,

                  compress: {

                    drop_console: true,

                    drop_debugger: false,

                    pure_funcs: ["console.log"],

                  },

                },

              }),

            ],

          };

          Object.assign(config, {

            optimization,

          });

          config.resolve = {

            ...config.resolve,

            alias: {

              "@": resolve("src"),

            },

          };

        }

      },

    对象方式

    configureWebpack: {

        plugins: [ new JavaScriptObfuscator({ rotateStringArray: true, }, []) ]，

        resolve: {

          alias: {

            "@": resolve("src"),

          },

        },

    },

    方法二

    添加依赖

    npm i terser-webpack-plugin@4.2.3 -D

    vue.config.js配置

    const TerserPlugin = require('terser-webpack-plugin')

    configureWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        config.plugins.push(new TerserPlugin())
      }
    }
     

    方法三


    const JavaScriptObfuscator = require('webpack-obfuscator');

    module.exports = {
        entry: {
            'mian1': './index1.js',
            'main2': './index2.js'
        },
        output: {
            path: 'dist',
            filename: '[name].js' 
        },
        plugins: [
            new JavaScriptObfuscator({
                rotateUnicodeArray: true
            }, ['main2.js'])
        ]
    };

    详细配置

    1.首先安装 npm i webpack-obfuscator -D 与 npm i compression-webpack-plugin -D

    2.打开vue.config.js 文件，如没有在项目根目录新建，粘贴以下内容，已经加上注释

    1. let CompressionPlugin = require("compression-webpack-plugin");
    2. const JavaScriptObfuscator = require('webpack-obfuscator');
    3. const encryption = true; // 打包后的代码是否加密
    4.  
    5. module.exports = {
    6.   publicPath: '/', // //基本路径
    7.   outputDir: 'dist', //打包的时候生成的一个文件名
    8.   assetsDir: 'assets', //静态资源目录(js,css,img,fonts)这些文件都可以写里面
    9.   productionSourceMap: false, //生产环境是否生成 sourceMap 文件，一般情况不建议打开
    10.   // 显式转义依赖
    11.   transpileDependencies: ['webpack-dev-server/client'],
    12.  
    13.   chainWebpack: config => {
    14.     // 指定入口  es6转es5
    15.     config.entry.app = ['babel-polyfill', './src/main.js'];
    16.   },
    17.  
    18.   runtimeCompiler: true,
    19.   configureWebpack: config => {
    20.     if (process.env.NODE_ENV == 'development') {
    21.       module.exports = {
    22.         lintOnSave: false, //是否开启eslint保存检测 ,它的有效值为 true || false || 'error'
    23.         devServer: {
    24.           // open:true,//启动项目后自动开启浏览器
    25.           port: 8080, //端口号
    26.           host: '0.0.0.0',
    27.           disableHostCheck: true,
    28.           https: false, //是否开启协议名,如果开启会发出警告
    29.           hotOnly: false, //热模块更新的一种东西,webpack中自动有过配置,但如果我们下载一些新            的模块可以更好的给我更新一些配置
    30.           proxy: {
    31.             //配置跨域
    32.             '/api': { //配置跨域的名字
    33.               target: ' https://xxx.xxx/api', //跨域的地址
    34.               changOrigin: true, //是否跨域
    35.               pathRewrite: { //当前的名字
    36.                 '^/api': ''
    37.               }
    38.             }
    39.           }
    40.         }
    41.       };
    42.     }
    43.  
    44.     if (process.env.NODE_ENV === 'production' && encryption == true) {
    45.       return {
    46.         plugins: [
    47.           new CompressionPlugin({
    48.             algorithm: 'gzip', //'brotliCompress'
    49.             test: /\.js$|\.html$|\.css/, // + $|\.svg$|\.png$|\.jpg
    50.             threshold: 10240, //对超过10k的数据压缩
    51.             deleteOriginalAssets: false //不删除原文件
    52.           }),
    53.           //js代码加密
    54.           new JavaScriptObfuscator({
    55.             rotateUnicodeArray: true, // 必须为true
    56.             compact: true, // 紧凑 从输出混淆代码中删除换行符。
    57.             controlFlowFlattening: false, // 此选项极大地影响了运行速度降低1.5倍的性能。 启用代码控制流展平。控制流扁平化是源代码的结构转换，阻碍了程序理解。
    58.             controlFlowFlatteningThreshold: 0.8,
    59.             deadCodeInjection: true, // 此选项大大增加了混淆代码的大小（最多200％） 此功能将随机的死代码块（即：不会执行的代码）添加到混淆输出中，从而使得更难以进行反向工程设计。
    60.             deadCodeInjectionThreshold: 0.5,
    61.             debugProtection: true, // 调试保护  如果您打开开发者工具，可以冻结您的浏览器。 
    62.             debugProtectionInterval: true, // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，这使得使用“开发人员工具”的其他功能变得更加困难。它是如何工作的？一个调用调试器的特殊代码;在整个混淆的源代码中反复插入。
    63.             disableConsoleOutput: true, // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
    64.             domainLock: [], // 锁定混淆的源代码，使其仅在特定域和/或子域上运行。这使得有人只需复制并粘贴源代码并在别处运行就变得非常困难。多个域和子域可以将代码锁定到多个域或子域。例如，要锁定它以使代码仅在www.example.com上运行添加www.example.com，以使其在example.com的任何子域上运行，请使用.example.com。
    65.             identifierNamesGenerator: 'hexadecimal', // 使用此选项可控制标识符（变量名称，函数名称等）的混淆方式。
    66.             identifiersPrefix: '', // 此选项使所有全局标识符都具有特定前缀。
    67.             inputFileName: '',
    68.             log: false,
    69.             renameGlobals: false, // 不要启动 通过声明启用全局变量和函数名称的混淆。 
    70.             reservedNames: [], // 禁用模糊处理和生成标识符，这些标识符与传递的RegExp模式匹配。例如，如果添加^ someName，则混淆器将确保以someName开头的所有变量，函数名和函数参数都不会被破坏。
    71.             reservedStrings: [], // 禁用字符串文字的转换，字符串文字与传递的RegExp模式匹配。例如，如果添加^ some * string，则混淆器将确保以某些字符串开头的所有字符串都不会移动到`stringArray`。
    72.             rotateStringArray: true, // 
    73.             seed: 0, // 默认情况下（seed = 0），每次混淆代码时都会得到一个新结果（即：不同的变量名，插入stringArray的不同变量等）。如果需要可重复的结果，请将种子设置为特定的整数。
    74.             selfDefending: false, // 此选项使输出代码能够抵抗格式化和变量重命名。如果试图在混淆代码上使用JavaScript美化器，代码将不再起作用，使得理解和修改它变得更加困难。需要紧凑代码设置。
    75.             sourceMap: false, // 请确保不要上传嵌入了内嵌源代码的混淆源代码，因为它包含原始源代码。源映射可以帮助您调试混淆的Java Script源代码。如果您希望或需要在生产中进行调试，可以将单独的源映射文件上载到秘密位置，然后将浏览器指向该位置。
    76.             sourceMapBaseUrl: '', // 这会将源的源映射嵌入到混淆代码的结果中。如果您只想在计算机上进行本地调试，则非常有用。
    77.             sourceMapFileName: '',
    78.             sourceMapMode: 'separate',
    79.             stringArray: true, // 将stringArray数组移位固定和随机（在代码混淆时生成）的位置。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
    80.             stringArrayEncoding: false, // 此选项可能会略微降低脚本速度。使用Base64或RC4对stringArray的所有字符串文字进行编码，并插入一个特殊的函数，用于在运行时将其解码回来。
    81.             stringArrayThreshold: 0.8, // 您可以使用此设置调整字符串文字将插入stringArray的概率（从0到1）。此设置在大型代码库中很有用，因为对stringArray函数的重复调用会降低代码的速度。
    82.             target: 'browser', // 您可以将混淆代码的目标环境设置为以下之一： Browser 、Browser No Eval 、Node 目前浏览器和节点的输出是相同的。
    83.             transformObjectKeys: false, // 转换（混淆）对象键。例如，此代码var a = {enabled：true};使用此选项进行模糊处理时，将隐藏已启用的对象键：var a = {};a [_0x2ae0 [（'0x0'）] = true;。 理想情况下与String Array设置一起使用。
    84.             unicodeEscapeSequence: true, // 将所有字符串转换为其unicode表示形式。例如，字符串“Hello World！”将被转换为“'\ x48 \ x65 \ x6c \ x6c \ x6f \ x20 \ x57 \ x6f \ x72 \ x6c \ x64 \ x21”。
    85.           }, ['abc.js']) // abc.js 是不混淆的代码
    86.         ],
    87.       }
    88.     };
    89.  
    90.     if (process.env.NODE_ENV === 'production' && encryption == false) {
    91.       return {
    92.         plugins: [
    93.           new CompressionPlugin({
    94.             algorithm: 'gzip', //'brotliCompress'
    95.             test: /\.js$|\.html$|\.css/, // + $|\.svg$|\.png$|\.jpg
    96.             threshold: 10240, //对超过10k的数据压缩
    97.             deleteOriginalAssets: false //不删除原文件
    98.           }),
    99.         ],
    100.       }
    101.     };
    102.  
    103.     //2019.8.30
    104.     //解决：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in )
    105.     config.resolve = {
    106.       extensions: ['.js', '.vue', '.json', ".css"],
    107.       alias: {
    108.         'vue$': 'vue/dist/vue.esm.js'
    109.       }
    110.     };
    111.   },
    112. }

    还有个vue 配置【详解】 vue.config.js （ 含 webpack 配置 ）_朝阳39的博客-CSDN博客_vue.config.js webpack

  • 相关阅读:
    Linux扩展篇之Shell编程三(函数)
    机器学习3判断机器算法的性能
    ceph源码阅读 erasure-code
    selenium 自动化测试
    性能测试操作流程
    运用贪心算法实现卡牌游戏-2023年全国青少年信息素养大赛Python复赛真题精选
    【微服务｜OpenFeign】openfeign的超时时间
    Leetcode算法解析——查找总价格为目标值的两个商品
    【c++_containers】10分钟带你学会list
    Neo4j图数据库实践——基于知识图谱方法开发构建猪类养殖疾病问答查询系统
  • 原文地址：https://blog.csdn.net/weixin_41127362/article/details/126002833