TOMMYHU

首先，移除一些冷门的 feature（比如 filter、inline-template 等）；

其次，引入 tree-shaking 的技术，减少打包体积。

第一点很好理解，所以这里我们来看看 tree-shaking，它的原理很简单，tree-shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记。
举个例子，一个 math 模块定义了 2 个方法 square(x) 和 cube(x) ：
export function square(x) {   return x * x } export function cube(x) {   return x * x * x }
我们在这个模块外面只引入了 cube 方法：
import { cube } from './math.js' // do something with cube
最终 math 模块会被 webpack 打包生成如下代码：
/* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) {   'use strict';   /* unused harmony export square */   /* harmony export (immutable) */ __webpack_exports__['a'] = cube;   function square(x) {     return x * x;   }   function cube(x) {     return x * x * x;   } });
可以看到，未被引入的 square 模块被标记了， 然后压缩阶段会利用例如 uglify-js、terser 等压缩工具真正地删除这些没有用到的代码。

也就是说，利用 tree-shaking 技术，如果你在项目中没有引入 Transition、KeepAlive 等组件，那么它们对应的代码就不会打包，这样也就间接达到了减少项目引入的 Vue.js 包体积的目的。
Last modified by tommyhu on2021/06/10 16:28