多个js文件如何一起压缩加密？一文带你了解

首先要声明一点，目前在前端开发中，要实现完全的JavaScript加密是不可能的。所有的加密技术只能说是代码混淆，通过一系列的处理使得源代码难以理解，从而达到加密的效果。因此，在本文中提及JavaScript代码加密，指的是代码混淆。

由于JavaScript主要在浏览器端执行，这就意味着任何人都可以直接查看网站的代码。如果代码没有进行任何处理，就会导致源代码直接暴露，他人可以轻松复制你的劳动成果。但由于不存在纯粹的加密方案，我们只能让代码变得更加难以阅读，使他人难以复制你的成果，以达到“加密”的目的。我强烈推荐你尝试一下safekodo代码加密工具。

对于使用Webpack、Vite等打包工具打包后的多个JavaScript文件，我不建议对所有文件都进行加密。主要原因是每个文件都进行加密会带来一定的性能损耗，当然你也可以忽略这个损耗。我建议的做法是将一些核心的代码抽离出来，对这部分代码进行单独的混淆加密。

好的，现在让我们开始使用safekodo来实现多个JavaScript文件的代码混淆加密。

首先，我们来看一下目录结构和文件信息。

sk-demo

├─ index.html

├─ js

│  ├─ a.js

│  └─ b.js

├─ readme.md

└─ safekodo-js

在sk-demo项目下，我们有一个index.html文件和两个文件夹：js文件夹中包含未加密的JavaScript代码，而safekodo-js文件夹则用于存放加密后的JavaScript文件。

首先是index.html的代码如下：

    

    

    

    

    

    









    测试

然后是a.js文件，其中包含了两个全局方法：appendHtml和functionA。

window.appendHtml = (textContent,color) => {

    let div = document.createElement('div');

    div.style.color = color;

    div.textContent = textContent;

    document.getElementById('demo').appendChild(div);

}

window.functionA = () => {

    document.querySelector('#demo div').remove();

    appendHtml('点击按钮调用了functionA','red')

    functionB();

}

接下来是b.js文件。

window.functionB = () => {

    appendHtml('functionA中调用了functionB', 'blueviolet')

}

首先，我们通过button按钮触发执行了a.js中的functionA，然后functionA又调用了b.js中的functionB方法。

在页面视图上，可以看到以下变化：

• 在按钮未点击时，页面上显示按钮和页面未点击字样。
• 在点击按钮后，页面上的页面未点击字样被移除，出现了红色的点击按钮调用了functionA字样，随后又出现了functionA中调用了functionB字样（注意：由于JavaScript执行非常快，实际上看上去是一瞬间完成的）。

要对上述多个JavaScript文件进行加密，首先将它们压缩为ZIP格式（最好直接在js文件目录下压缩a.js和b.js，确保解压ZIP后直接得到的是两个js文件，而不是一个文件夹）。

打开safekodo官网，选择顶部导航栏中的JS多文件加密，将ZIP文件拖入或点击选择ZIP文件。根据需求修改加密参数配置，点击提交加密后，文件加密完成后可点击下载文件。

将ZIP文件解压到项目的safekodo-js文件夹下。

现在文件目录结构如下，safekodo-js文件夹中包含两个加密后的JavaScript文件：

sk-demo

├─ index.html

├─ js

│  ├─ a.js

│  └─ b.js

└─ safekodo-js

   ├─ a.js

   └─ b.js

├─ readme.md

然后修改index.html中的引用路径：

随后，点击测试按钮，JavaScript仍然可以成功调用。

相信通过上述示例，你已经学会了如何使用safekodo代码加密工具对多个JavaScript文件进行加密。如果还有疑问或问题，请在官网右侧提交工单，我们会为你解答。