6月10
首先,移除一些冷门的 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
其次,引入 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

