TOMMYHU

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

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

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

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