企业宣传网站建设需求说明书的模板,好看网电影网站模板免费下载,wordpress 添加编辑框,河北建设集团官网参考案例代码
海南酷森科技有限公司/webpack-simple-demo
Terser#xff08;简要的/简短的#xff09; 混淆依据 混淆是发生在代码已经 bundle 之后的事情 变量或者函数在被引用或赋值时才能被混淆 孤立的函数或者变量可能会被移除#xff0c;但不会被混淆#xff0c;要…参考案例代码
海南酷森科技有限公司/webpack-simple-demo
Terser简要的/简短的 混淆依据 混淆是发生在代码已经 bundle 之后的事情 变量或者函数在被引用或赋值时才能被混淆 孤立的函数或者变量可能会被移除但不会被混淆要通过显式地引用
如果被赋值的变量没有被使用会被移除上图来看 打包后的代码url 被干掉了 webpack 的 externals 配置先于 terser 该参数的意义即保留现有的 import $ from jquery 引用方式又明确告知这个 jquery 不需要打包到最终代码去例如 import Vue from vue也即 Vue 这个变量目前可以作为模块方式被所有模块使用但是这个 import Vue from vue 提取方式是从全局 cdn 链接获得这样可以减少文件打包后的体积这样说太抽象我们看几个截图就一目了然了
webpack 开启外部依赖后的打包后的结果 先看源码引入方式仍然 webpack 方式的引入使用时也是模块化使用 打包后的代码在顶部会直接用 o jQuery的方式来获取而不是从自身的模块中加载就这么一点点区别但是 var r e.n(o);代码还是将 jQuery 注册为 webpack 中的模块了后续代码都会用 r() 来获取这个对象这样外部与内部就统一了 webpack.config.js 中的设置你可以改个名 JQ试试,打包时就变成了 JQ 这是不是就学会使用了 terser 之前的那个步骤是什么样子的 先关闭 terser打包出来的格式如下 结构是没啥变化的terser 因为无引用不压缩的逻辑JQ 这个属于根变量没有任何引入渠道所以不会进行任何处理因此 terser 过程是发生在代码已经 bundle 出来后再根据抽象语法树进行混淆压缩处理而处理的关键就是是否是根变量赋值变量都会被重命名例如 external_JQ_namespaceObject这些__webpack_require__,JQ 既不是赋值变量也不是导出变量所以不会被重命名不信我们下面给了一个案例 我随便写了一个 wx.runtime.getURL() 这是一个不存在的变量下的函数引用它不会被处理
源代码被赋值的变量会被重新命名根变量不会 得出一个结论任何根变量都可以放心大胆地使用不会被混淆处理在开发 chrome exension 时我就担心 chrome.* 这种变量是否会被改名现在结论就是不用担心这个概念不会被改名只要无赋值概念都不存在混淆改名的问题大胆使用
