gpt4 book ai didi

vue-cli脚手架的.babelrc文件用法说明

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 31 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue-cli脚手架的.babelrc文件用法说明由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

虽然es6还没被浏览器全部支持,但是使用es6是大势所趋,所以babel应运而生将es6代码转换成浏览器能够识别的代码 。

什么是.babelrc文件呢? 熟悉linux的同学一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等,类似bashrc,zshrc 。

这个文件是用来设置转码的规则和插件 。

vue-cli脚手架的.babelrc文件 。

browserslist: library to share supported browsers list between different front-end tools. it is used in

autoprefixer 。

babel-preset-env 。

eslint-plugin-compat 。

stylelint-no-unsupported-browser-features 。

postcss-normalize 。

补充知识:vue cli3 element-ui懒加载 按需加载ui组件 。

前言 。

vue cli3.x + ui框架 开发时,经常实际只用到的 ui框架 提供的几个组件,而每次我们是全部引入,这会照成程序需要消耗更多的资源,尤其是在移动端(例如使用 mint ui),在性能上会有更大的影响,照成不好的用户体验.

接下来记录以 vue cli3.x +element ui 为例实现按需加载组件.

未引入 element 插件时 。

vue-cli脚手架的.babelrc文件用法说明

引入 element ui(npm i element-ui -s) 。

如下图,可见 app.js 增加了 5m 的数据.

vue-cli脚手架的.babelrc文件用法说明

只引入 element 的部分组件 。

如下图,可见虽然我们只引用了两个组件,但是 app.js 的大小几乎不变,这样没有实现按需加载的效果.

vue-cli脚手架的.babelrc文件用法说明

实现按需加载 。

1.安装插件 npm i babel-plugin-component -d 。

2.配置 babel.config.js 。

把 main.js 也修改下:

配置好后重新 npm run serve 下,此时的 app.js 相对于没有引入插件时只增加了几百 k 的大小,这样就实现了按需加载.

vue-cli脚手架的.babelrc文件用法说明

以上这篇vue-cli脚手架的.babelrc文件用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我.

原文链接:https://www.cnblogs.com/papi/p/7656162.html 。

最后此篇关于vue-cli脚手架的.babelrc文件用法说明的文章就讲到这里了,如果你想了解更多关于vue-cli脚手架的.babelrc文件用法说明的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com