6月10

Vue.js 3.0 在源码体积的减少方面做了哪些工作呢?

| |
16:26 大前端 » vue.js  From: 本站原创
阅读(1428) | 评论(2) | 引用(0)
首先,移除一些冷门的 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
tommyhuc.cn网友,来自
2021/06/11 15:49
https://v3.cn.vuejs.org/guide/composition-api-setup.html#props
tommyhuc.cn网友,来自
2021/06/10 16:31
https://www.kancloud.cn/cecil/vue3_x/2261038
分页: 1/1 第一页 1 最后页
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emot
打开HTML
打开UBB
打开表情
隐藏
记住我

昵称 : 

密码(可不填) :  游客无需密码

网址 (可不填) : 

电邮 (可不填) :  [注册]