Vue.js 3.0 在源码体积的减少方面做了哪些工作呢? - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Jun 10

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

tommyhu , 16:26 , 大前端 » vue.js , Comments(2) , Trackbacks(0) , Reads(769) , Via Original Large | Medium | Small
首先,移除一些冷门的 feature(比如 filter、inline-template 等);

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

第一点很好理解,所以这里我们来看看 tree-shaking,它的原理很简单,tree-shaking 依赖 ES2015 模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块并打上标记。
举个例子,一个 math 模块定义了 2 个方法 square(x) 和 cube(x) :

我们在这个模块外面只引入了 cube 方法:

最终 math 模块会被 webpack 打包生成如下代码:

可以看到,未被引入的 square 模块被标记了, 然后压缩阶段会利用例如 uglify-js、terser 等压缩工具真正地删除这些没有用到的代码。

也就是说,利用 tree-shaking 技术,如果你在项目中没有引入 Transition、KeepAlive 等组件,那么它们对应的代码就不会打包,这样也就间接达到了减少项目引入的 Vue.js 包体积的目的。
Last modified by tommyhu on2021/06/10 16:28
互联网开发网友 Email Homepage
2021/06/11 15:49
https://v3.cn.vuejs.org/guide/composition-api-setup.html#props
互联网开发网友 Email Homepage
2021/06/10 16:31
https://www.kancloud.cn/cecil/vue3_x/2261038
Pages: 1/1 First page 1 Final page
Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot