webpack打包优化-vant按需映入

于 2024-03-29 03:17:47 发布
阅读量956 收藏 30
点赞数 13
分类专栏： 程序员 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/afsdfrsg/article/details/137129715
版权
本文介绍了如何在Vue项目中使用`babel-plugin-import`插件实现vant组件的按需引入，以减少项目体积。详细步骤包括安装 vant 和插件，配置 babel.config.js，页面注册和全局引入 vant 组件，以及在 main.js 中引入。此外，作者还分享了个人前端开发经验和提供了一份全面的前端学习资源，旨在帮助开发者提升技能。
摘要由CSDN通过智能技术生成

yarn add vant

2.下载所需插件

// babel-plugin-import 是一款 babel 插件，

//它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -D

3.在babel.config.js配置

// 在.babelrc 中添加配置

// 注意：webpack 1 无需设置 libraryDirectory

{

“plugins”: [

["import", {

  "libraryName": "vant",

  "libraryDirectory": "es",

  "style": true
最低0.47元/天 解锁文章
afsdfrsg
关注
专栏目录
vant的安装和引入
qq_52722039的博客
04-29 4880
Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。 目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。 如果你需要开发一个移动商城，用 Vant 就再合适不过了。 npm i vant -S ：这是简写形式。 npm install vant --save :这是完整写法。 如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。 安装好v
webpack中‘vant’全局引入和按需引入【vue-cli】
weixin_30569153的博客
12-05 605
一、安装 npm i vant -S 二、引入 1.全局引入 import Vue from 'vue' import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant) 2.按需引入 // 1.需要先安装npm install babel-plugin-import -D /...
Vue2-vant按需映入
技术前端，忠于热爱 @0.活在风浪里
01-05 1109
在根目录下新建vue.config.js文件 //修改默认配置,配置跨域 module.exports = { //解决打包目录错误, publicPath: "./", devServer: { proxy: { "/api": { // http://www.sirfang.com/build/ajax_get_list这是完整路径,将com/后的路径重写路径为api .
组件库按需加载 借助babel-plugin-import实现
weixin_34245749的博客
05-28 1102
对于大中型前端项目为了解耦与复用，更多的公司会选择自己封装组件库，那么一次引入整个组件库必然导致项目过大，如何按需加载则必须要做 前世 ant-design的babel插件babel-plugin-import 原理 [git项目地址](https://github.com/ant-design/babel-plugin-import) 在babel转码的时候，把整个库‘antd’的引用，变...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且最近的Webpack项目尚未使用它。 与一起使用以使用...
webpack-oss-plugin:webpack插件 将打包后的文件上传到OSS
05-25
安装 webpack-oss-upload-plugin npm install webpack-oss-upload-plugin -D 在 webpack config 中使用 const prefix = `${dir}/${projectName}/${version}/`; { output:{ publicPath: `...
webpack-wxapp-module-plugin:微信小程序 webpack打包插件
04-28
webpack-wxapp-module-plugin 一、简介 微信小程序webapck插件 支持哪些特性? 仅需要配置entry 指向app.js即可 例如 entry:'./app.js' 支持node_modules 模块引用 支持node_modules 组件引用 node_modules平行移植 ...
html-webpack-inject-attributes-plugin:使用html-webpack-plugin向标签添加ext属性的简单而强大的方法
05-06
html-webpack-inject-attributes-plugin 添加自定义属性以注入标签 安装 npm install html - webpack - inject - attributes - plugin - D 用 请在html-webpack-plugin之后使用它，尤其是在webpack2 +中。 添加到...
babel-plugin-import, 模块式导入插件插件.zip
10-10
babel-plugin-import, 模块式导入插件插件 babel-plugin-import模块导入插件，与 antd， antd移动插件，等等。 为什么 babel-plugin-import英语教学指南中文说明在哪里添加 babel-plugin-importb
vant引用babel-plugin-import实现自动按需引入组件
seventy_seven77的博客
04-13 3044
按照官网使用会报错 vuecli3 安装插件 npm i babel-plugin-import -D babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true ...
Vue - vant安装(引用babel-plugin-import实现自动按需引入组件)
iotjin的专栏
06-07 2596
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 以Vant 为例： 1、安装 首先安装vant # Vue 2 项目，安装 Vant 2： npm i vant -S # Vue 3 项目，安装 Vant 3： npm i vant@next -S 安装 babel-plugin-import 插件 npm i babel-plugin-import -D 也可以通过图形化界面安装 2、配置babel.con.
vue+vant2 babel-plugin-import插件按需引入组件 + postcss-px-to-viewport屏幕适配，详细步骤（第一步）
最新发布
u010534828的专栏
02-24 2186
vue+vant2 babel-plugin-import插件按需引入组件 + postcss-px-to-viewport屏幕适配，详细步骤
babel-plugin-import 插件 的使用
热门推荐
ShiYadong的专栏
06-30 4万+
     babel-plugin-import   是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式以Vant 为例：# 安装 babel-plugin-import 插件 npm i babel-plugin-import -D// 在 .babelrc 或 babel-loader 中添加插件配置 // 注意：webpack 1 无需设置 libra...
vant自动按需引入-需要下载插件babel-plugin-import
weixin_57246351的博客
07-29 670
vant自动按需引入安装插件在babel配置文件里 (babel.config.js)全局注册 - 会自动按需引入 安装插件 在babel配置文件里 (babel.config.js) 全局注册 - 会自动按需引入 第一步:安装插件babel-plugin-import yarn add babel-plugin-import -D 第二步:在babel配置文件里 (babel.config.js) module.exports = { plugins: [ ['import', {
组建按需加载之babel-plugin-import
chaitong2204的博客
07-31 1万+
笔者最近发现，很多开发的小伙伴引用第三方的库都喜欢全局引入，其实这样是非常不友好的 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from ...
babel-plugin-import 实现按需引入
CamilleZJ的博客
11-15 9047
babel-plugin-import 实现按需引入
vant组件的引入方式
键指江湖的博客
09-21 1万+
vant组件的引入方式 这里接着上一讲（vue cli3脚手架创建vant项目环境） 1.全局导入所有组件 注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件 在main.js里面写入 import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Va...
webpack打包优化实践：按需加载与配置调整
"本文主要介绍了如何对webpack进行优化，包括按需加载、优化loader配置以及优化文件路径等方法，旨在减小打包后的文件大小，提高首页加载速度，并优化打包过程。" 在现代Web开发中，随着项目的复杂度增加，webpack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值