记一次vue项目代码混淆的经历

背景

给其中一个js文件做混淆

并且打包后的文件命名要求是 chunk-{hash}.{hash}.js，因为chunk开头的文件有很多，这样不容易被找到

环境：vue2、webpack4

思路

用 splitChunks 做拆包，通过 name 属性自定义名称。再使用 webpack-obfuscator 做代码混淆。

拆包

首先生成一段8位数的hash值，赋值给文件名的第一个hash，第二个是webpack自动生成的。

这样做是为了让 webpack-obfuscator 做混淆

module.exports = {
  configureWebpack: config => {
      config.optimization.splitChunks = {
          cacheGroups: {
              obfuscate: {
                  test: test: /[\\/]src[\\/]obfuscate\.js$/,
                  name() {
                      return `chunk-${generateRandomString(8)}`;
                  },
                  chunks: "all", // 拆分所有类型的代码块
                  enforce: true // 强制拆分，即使模块的大小不符合默认拆分条件
              }
          }
      }
  }
}

混淆

混淆的第一个参数我就不多说了，具体可以看 官方文档 ，我用的是中等加密。

重点是第二个参数，因为需求是只混淆一个js文件，其他js不混淆。而第二个参数的含义是exclude

这就和我们想要的相反，这里我通过查看 multimatch文档 知道可以通过 ! 来做反选

["**/..js", !**/chunk-${random}.*.js] 这样就达到了我们的目的

貌似进入尾声

本以为到这里就结束了，果然事情没那么简单。打包后发现虽然拆包成功，但是 vendors 和 commons 文件没有了，包体积还变大了。

通过一顿百度，chatGPT，最终还是翻看vue文档得知 vue.config.js 会被合并到 webpack 配置中

意识到上面 splitChunks 的写法错误，应该是把默认的 splitChunks 配置给覆盖了，于是改变写法

config.optimization.splitChunks.cacheGroups.obfuscate = {
    test: /[\\/]src[\\/]obfuscate\.js$/,
    name() {
      return `chunk-${generateRandomString(8)}`;
    },
    chunks: "all", // 拆分所有类型的代码块
    enforce: true // 强制拆分，即使模块的大小不符合默认拆分条件
};

到这里就完成了

彩蛋

打包后的 index.html 有大量的 prefetch 引入，而且还是和首屏渲染无关的js和css，这对我们的首屏渲染速度极其不友好。

是因为配置了路由懒加载相关的引入都被当成 prefetch 打包进了index.html

chainWebpack: config => { config.plugins.delete("prefetch-index") }

因为项目是多页面，所以prefetch-后面需要拼接页面名称

最终删掉了所有的 prefetch 引入