vue条件编译和去除不可达代码

最新推荐文章于 2024-06-25 00:10:08 发布
最新推荐文章于 2024-06-25 00:10:08 发布
阅读量3.2k 收藏 2
点赞数
分类专栏： 开发技术 文章标签： webpack条件编译 vue条件编译 vue选择编译 vue去除不可达代码 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xue251248603/article/details/80923314
版权
本文介绍了如何在Vue项目中进行条件编译，通过修改`webpack.dev.conf.js`和`webpack.prod.conf.js`配置文件实现。同时，还讲解了如何在构建过程中去除不可达代码，提升应用性能。详细步骤包括对`webpack.prod.conf.js`的修改，以确保优化生产环境的构建结果。
摘要由CSDN通过智能技术生成

条件编译：

修改：build/webpack.dev.conf.js

new webpack.DefinePlugin({
    'process.env': config.dev.env,
    DEBUG: JSON.stringify(true),
}),

修改：build/webpack.prod.conf.js

new webpack.DefinePlugin({
    'process.env': config.dev.env,
    DEBUG: JSON.stringify(false),
}),

接下来就可以使用了：

if (DEBUG) {
    console.log('this is dev env');
最低0.47元/天 解锁文章
xue251248603
关注
专栏目录
如何学习前端炙手可热的Vue？Vue学习路线图详解！
skysys的研究小屋
01-18 629
Vue 概述 如果你是一名 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染等等，或者还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。 那么究竟什么是Vue，有什么作用？ Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。 相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是初
vue模板编译
carly_ssj的博客
08-24 152
/* 正则 */ let regular = /\{\{(.+?)}\}/g; function compile(template, data) { //查找模板下的所有子元素 let childNodes = template.childNodes; for (let i = 0; i < childNodes.length; i++) { //查找子元素节点类型 1=== 元素 3===文本 ..
条件编译
weixin_33849942的博客
05-05 209
本文主要介绍c语言中条件编译相关的预编译指令，包括 #define、#undef、#ifdef、#ifndef、#if、#elif、#else、#endif、defined。#define 定义一个预处理宏#undef 取消宏的定义 #if 编译预处理中的条件命令，相当于C语法中的if语句#ifdef ...
webpack,vite为JS、HTML、CSS开启条件编译,宏剔除,代码剔除
最新发布
墨抒颖
06-25 1025
webpack,vite为JS、HTML、CSS开启条件编译,宏剔除,代码剔除
Vue+element ui系列：npm run dev --ld 来实现样式的条件编译，使用到了js-conditional-compile-loader插件
浪潮行舟_chenjin2136
04-20 383
问题来了，样式的条件编译我想用以下两个方式实现，都遇到了问题，找了一些资料，最终解决方案是设置。最终实现样式的条件编译，用的同一套代码，有个列表显示数据不一致，通过条件编译实现显示不同的列表。xxx是在webpack中指定的条件属性名，如上面的isHK。插件支持IFDEBUG和IFTRUE两个条件编译指令。进行如下设置后，样式的条件编译实现。用法是：在js代码的任意地方以//结尾，中间是被包裹的js代码。versionType为1或2。时versionType为1。可以看到舱门管理被隐藏。
vue-cli+uni-app+vue3.0+ts构建自定义条件编译（飞书）小程序
weixin_41722909的博客
09-11 3337
一、新建项目 1.全局安装 vue-cli，如果有用vue-cli构建过项目可跳过该步 npm install -g @vue/cli 2.创建uni-app+vue3项目 vue create -p dcloudio/uni-preset-vue#vue3 uni-vue3-project uni-app模板选择：默认模板(TypeScript) 二、添加配置 1.做一些对应飞书小程序的配置，可参考官网说明 package.json中加入如下配置： "uni-app": {
vue单词汇总
liao_11的博客
10-21 1126
vue Vue单词大全 0~9 vue:(view)视图，视觉; message:消息; item:项目; in:在...里面;在(某范围或空间内的)某一点;在(某物的形体或范围)中;在…内;在…中;进入; counter:计数器;柜台;对立面; el:(element)(计算计)挂载元素;Vue实例挂载的元素节点; data:数据; methods:方法,方法论; add:添加; reduce:减少.
Vue(v2.6.11)万行源码生啃，就硬刚！
掘金安东尼
07-06 1949
玩归玩，闹归闹，Vue 源码要知道。
TypeScript---编译选项
qq_45679015的博客
12-14 652
自动编译文件 编译文件时，使用-w指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。 tsc xxx.ts -w 自动编译整个项目 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。 但是能直接使用tsc命令的前提时，要现在项目根目录下创建一个ts的配置文件tsconfig.json。 tsconfig.json是一个JSON文件，添加配置文件后，只需要tsc命令即可完成对整个项目的编译。 配置选项： include O--->
使用template实现条件编译
01-09 730
    我们知道，使用宏可以实现条件编译：#if 1    //do something#else   //do something else#endif     使用模板也能够达到类似的效果：#include stdio.h>template bool value>void func()...{    if (value)    ...{        printf("t
vue底层-template模板编译
挥别了青春的博客
06-05 6155
vue底层-template模板编译 vue的渲染过程 Vue的模板编译在$mount之后，通过compile方法，经过parse、optimize、generate方法，最后生成render function来生成虚拟DOM，虚拟DOM通过diff算法，来更新DOM。 具体功能如下： parse 函数解析 template optimize 函数优化静态内容 generate 函数创建 re...
【webpack系列】----- 条件编译
qiuzijian0609的博客
04-05 2604
前端工程化开发阶段会遇到哪些场景需要使用条件编译？ 1.不使用mock的那部分假数据，总不能放在代码里发布生产环境吧？ 2.debug工具代码，如移动端比较流行的vconsole插件，我们不希望测试前引入这份代码，发布生产的时候手动关闭这部分代码吧，我们需要一个开关的功能去自动化引入和移除。 … 遇到以上这些情况，正是需要条件编译这个功能。 那么如何在webpack里面加入条件编译？ 1.利用Ug...
template中实现条件编译的补充：使用int2type技巧
01-09 689
    先贴代码：#include stdio.h>template int v>struct Int2Type...{    enum ...{ value = v };};void func(Int2Typetrue>)...{    printf("true ");}void func(Int2Typefalse>)...{    printf("false ");}template
vue html标签编译,javascript – VueJS在内联模板组件中重新编译HTML
weixin_35826493的博客
06-10 257
我将bootstrapTable(https://github.com/wenzhixin/bootstrap-table)包装成一个指令,如下所示：Vue.directive('bootstraptable', {priority: 1000,params: ['url', 'resource-name'],bind: function () {var _self = this;$(this.e...
Vue对Html标签应用条件渲染
weixin_30911809的博客
03-21 185
我的需求 在flag属性为true时 渲染标签的html为 <input :data-val-required="不能为空"/> 在flag属性为false时 渲染标签的html为 <input /> 代码实现 <input :data-val-required="flag?'不能为空':null"/> 转载于:https:/...
Vue2 项目小技巧
jackwmj12的博客
09-13 889
vue
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值