杭州企业云网站建设seo推广知识
参考案例代码
海南酷森科技有限公司/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.* 这种变量是否会被改名，现在结论就是不用担心这个概念，不会被改名，只要无赋值概念，都不存在混淆改名的问题，大胆使用