记录Vue打包

一、开启gzip压缩

服务器那边已经开启了gzip压缩，考虑到服务器压力，本地也开一下

if (process.env.NODE_ENV === 'production') {
      // 有其他需要可以在这里添加
      const productionGzipExtensions = ['js', 'css', 'svg', 'ttf', 'otf', 'html']       return {
        plugins: [
          new BundleAnalyzerPlugin(), // 这个是打包分析
          new CompressionPlugin({
            algorithm: 'gzip', //'brotliCompress'
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
            threshold: 10240, //对超过10k的数据压缩
            minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
            deleteOriginalAssets: false //不删除原文件
          }),
        ],
       }
}

二、代码混淆加密

用的是webpack-obfuscator+javascript-obfuscator，本地版本webpack-cli@4.8，所以对应的插件版本是webpack-obfuscator@2.6和javascript-obfuscator@4.0，同样写在plugins数组中。不过用了之后发现打包奇慢无比...

new JavaScriptObfuscator({
            rotateStringArray: true,
            // 压缩代码
            compact: true,
            // 代码自我保护，混淆后的代码，不能使用代码美化，同时需要配置 cpmpat:true;
            // 经多个不同环境测试，开启此项有可能报错：Maximum call stack size exceeded
            // 可禁用此项
            selfDefending: true,
            // 控制流平坦化，将一些逻辑处理块都统一加上一个前驱逻辑块，每个逻辑块都由前驱逻辑块进行条件判断和分发，构成一个个闭环逻辑，导致整个执行逻辑十分复杂难读。但会导致代码执行效率变慢，最多慢1.5倍。可以使用 controlFlowFlatteningThreshold 这个参数来控制比例，取值范围是 0 到 1，默认 0.75
            controlFlowFlattening: false,
            // 禁用控制台输出, 通过用空函数替换它们来禁用console
            disableConsoleOutput: true,
            // 调试保护，开启后开发者工具进去无限debug模式
            debugProtection: true,
            // 域名锁定，锁定混淆的源代码，使其仅在特定域和/或子域上运行，使用后发现会出问题，慎用
            domainLock: ['xxxx.com'],
            // 禁用map包，开启后会从map中找到源码，混淆就失去意义了
            sourceMap: false,
            // 字符串混淆，none或'base64'、'rc4'两种
            stringArrayEncoding: ['base64'],
            // 删除字符串文字并将它们放在一个特殊的数组中
            stringArray: true,
            // 变量名混淆，标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
            identifierNamesGenerator: 'hexadecimal',
            // 对象键名替换，允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
            transformObjectKeys: true,
            // 注入无意义代码并控制比例
            deadCodeInjection: false,
            deadCodeInjectionThreshold: 0.2,
          }, []), // 数组中写不需要混淆的文件名，如：app.js

打完包后是这样的！！！

chunk-vendors超巨大一个，估计加载是不过关的，再加个分割吧。

 三、代码分割

用了自带的splitChunks。和plugins平级写就行了

optimization: {
          splitChunks: {
            chunks: 'all',
            minSize: 30000,
            maxSize: 60000,
            cacheGroups: {
              vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                name (module) {
                  const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                  return `npm.${packageName.replace('@', '')}`
                }
              }
            }
          }
        }

再次打包就变成了这样

浩浩荡荡几十条，大多数都几k到几十k不等。到这里就完成了需要的功能，记录完毕。