webpack项目瘦身之移除无依赖文件

最新推荐文章于 2023-09-25 14:34:57 发布
最新推荐文章于 2023-09-25 14:34:57 发布
阅读量459 收藏 1
点赞数
文章标签： webpack javascript 前端 react.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/129095518
版权

cfa0f887710d76fb3fac94a846e5b98f.png

背景

 作者在开发过程中，有遇到以下此场景:

 PM：请把关于出价场景的逻辑优化下，在出价前进行判断是否命中风控。

 FE：安排。

 在开发过程中，经常会通过搜索关键词来快速找到对应文件。此次也不例外，当在代码仓库搜索时，结果却有多个对应文件。经过长时间的排查验证发现有些文件是没有被引用的，影响了开发效率。

能不能通过一种方式来提高此类问题的开发效率？

拆解问题

表面原因

 项目仓库存在未引用的文件，干扰开发人员的判断，影响开发效率。

未引用的文件一开始就是未被引用的？

深层原因

 人为原因，需求迭代过程中，未及时移除或者标记无用文件。

 对于深层原因，不再叙述，因地制宜。

 接下来主要聊聊表面原因如何解决，有没有方法可以将仓库中无用的文件检索出来并适当移除？

分析整理

 构建工具：webpack

 技术栈：vue、react

 基于这些，

最低0.47元/天 解锁文章
大转转FE
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用webpack构建时可轻松删除未使用的Momentjs语言环境locales
08-07
使用webpack构建时，可轻松删除未使用的Moment.js语言环境(locales)
Webpack 应用瘦身
lentoo的博客
06-26 492
对大多数 Web 应用来说，页面性能直接影响着流量。这是一个经常为我们所忽视的事实。用户长时间的等待流失的不仅仅是跳出率、转化率，还有对产品的耐心和信赖。很多时候我们没有...
webpack 打包时排除某些依赖模块
我灰灰凭啥输
04-01 2068
防止将某些 import 的包打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖 例如，从 CDN 引入 jQuery，而不是把它打包： //index.html <script src="https://code.jquery.com/jquery-3.1.0.js"></script> //vue.config.js configureWebpack: { name: name, resolve: { alia.
从今天开始，学习Webpack，减少对脚手架的依赖(上)
weixin_33701251的博客
05-29 251
问：这篇文章适合哪些人？ 答：适合没接触过Webpack或者了解不全面的人。 问：这篇文章的目录怎么安排的？ 答：先介绍背景，由背景引入Webpack的概念，进一步介绍Webpack基础、核心和一些常用配置案例、优化手段，Webpack的plugin和loader确实非常多，短短2w多字还只是覆盖其中一小部分。 问：这篇文章的出处？ 答：此篇文章知识来自付费视频(链接在文章末尾)，文章由自己独立撰...
使用webpack-如何清理无用源文件
Thinking Code
10-15 1928
项目随着时间的推移不断更新迭代，或者新项目从老项目迁移开发，项目变得越来越臃肿，无形中就存在了很多无用的文件. 大型的项目，如果仅靠人肉去识别，难度相当大，那么怎样能够自动检测哪些是无用的文件呢？
webpack项目调试以及独立打包配置文件的方法
08-27
下面小编就为大家分享一篇webpack项目调试以及独立打包配置文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue webpack 项目自动打包压缩成zip文件的方法
10-16
主要介绍了Vue -- webpack 项目自动打包压缩成zip文件的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
webpack教程之webpack.config.js配置文件
12-09
在项目app目录下建立component.js文件,写入如下代码 export default (text='hello world')=>{ const element=document.createElement('div'); element[removed]=text; return element; } 在根目录下创建webpack....
webpack：使用externals配置来排除打包后的某个依赖&插件IgnorePlugin的使用
最新发布
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-25 1064
webpack：使用externals配置来排查打包后的某个依赖
webpack分开打包和合并打包的瘦身
weixin_30825581的博客
02-09 159
webpack.config.js 记录一下优化webpack的几个点： 1. devtool: false, //产品阶段不应该有devtool entry: { bundle : paths.appIndexJs, //__dirname + "/src/js/root.js", //项目的入口文件 vendor...
webpack打包测试_webpack选择性编译DefinePlugin（打包自动剔除测试数据）
weixin_33218578的博客
01-17 437
背景程序在开发的过程中，少不了打印调试用的日志，测试流程时伪造的数据。这些代码是不能出现在生产环境上的。这意味着在程序打包前，需要把相关代码剔除掉。这些事情用人手去做很麻烦，很容易疏漏。而且打包出来测试时遇到了bug，又得重新把测试代码添加回去。重复整个繁琐的过程。既然人工做这么麻烦而且容易出错，那能不能用程序帮我们完成这些事情呢？当然可以，用选择性编译技术就行，本文就介绍在webpack下解决这...
2020-03-05 为Webpack Vue项目瘦身
♀我爱摇滚，更爱金属乐♀
03-05 198
在利用webpack脚手架搭建vue项目后，往往最终打包的.js和.css文件过于庞大，造成首次加载的时候白屏时间过长，十分影响用户体验，下图为未经任何优化直接npm run build之后的情况： image.png 其中vendor.js文件高达1.16MB，平均白屏时间超过10秒，这个确实有点影响用户体验了。 第一步：使用CDN剥离JS文件，让他们独立加...
vue中打包优化瘦身
m0_61135864的博客
10-28 299
打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置 路由懒加载 只有在路由进入到这个页面的时候 才会去加载这个组件的资源 路由懒加载中的魔法注释可以人为设置这个文件的名字 （在注释中指定webpackChunkName） components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue") 打包去除console....
webpack打包之无依赖模块
weixin_30566111的博客
12-04 474
一、入口文件main.js // main.js console.log('webpack'); 二、出口文件bundle.js 1、浏览代码 2、本质 // 实际就是一个自执行函数 (function(modules) { //... })([function(module,exports){ console.log('webpack'); ...
12、webpack构建--移除未引用代码(tree shaking )
gosenkle的专栏
05-27 2503
tree shaking是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如import和export。这个术语和概念实际上是兴起于 ES2015 模块打包工具rollup。 新的 webpack 4 正式版本，扩展了这个检测能力，通过package.json的"sideEff...
前端优化，webpack打包删除无用文件，并附上批量删除文件脚本！非常好用
weixin_45137175的博客
03-09 1847
大家可能在webpack打包项目过程中，常遇见一些无用的图片，js文件，怎样能够自动检测哪些是无用的文件呢？本文中介绍使用插件useless-files-webpack-plugin查找无用文件，在terminal中删除，附加bat批量删除文件。
1.3 webpack打包忽略依赖
LetsStudy的博客
02-21 1974
1、webpack.base.conf.js //如下所示 externals:{ "vue":"Vue", "vuex":"Vuex", "vue-router":"VueRouter", "velocity-animate":"Velocity", "axios":"axios", "@antv/g2":"G2" } 2、在index.html中引入相关cdn 3、externals配置中排除G2的包时发现没有生效 直接使用new G2.Chart方式即可，不
去除项目多余文件的webpack插件实现
weixin_34408624的博客
05-01 1545
大多数项目随着时间的推移,经常会摒弃掉一部分功能, 但大多数只是入口关闭, 或注释掉功能代码块, 依赖的文件如果没删除掉,项目其他成员一般不会去处理. 在日常开发中, 通过webpack 生成的 stats 文件实现了去除多余文件的插件useless-files-webpack-plugin 插件用法如下: const UselessFile = require('useless-files-we...
18、webpack优化(3)——IgnorePlugin
热门推荐
2024路在何方
02-09 1万+
IgnorePlugin 这是webpack内置插件 这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去 举例： moment包 比如我们要使用moment这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。 moment包打包的问题 假设我们的代码值引入了以下一个API import moment from 'moment' //设置语言 mome...
项目webpack打包后的 dist 文件
09-05
通常它会包含一个或多个JS文件，包括应用的逻辑代码和依赖的第三方库，以及一个或多个CSS文件，包含项目的样式代码。此外，还会包含一些字体文件、图片或其他静态资源，这些文件在构建过程中被处理并复制到dist...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值