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

时间:2022-08-23 20:57:24

虽然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