在webpack中处理包含大量全局函数的大型JS文件
，可以采取以下几种方法：
- 按需加载：将大型JS文件拆分为多个模块，根据需要动态加载，避免一次性加载所有全局函数。可以使用webpack的代码分割功能，通过动态导入函数模块来减小文件体积并优化加载速度。同时，可以使用webpack提供的bundle分析工具进行分析，找出体积较大的模块，并进行合理拆分。
- 代码优化：对大型JS文件进行代码优化，避免冗余和重复代码。可以通过使用webpack的插件和工具，如UglifyJsPlugin等，对代码进行压缩、混淆和去除无用代码，减小文件体积。
- Tree Shaking：利用webpack的Tree Shaking功能，可以消除没有被引用的全局函数和模块，进一步减小文件体积。通过配置webpack的mode为production，同时开启optimization.sideEffects为true，webpack会自动进行Tree Shaking优化。
- 缓存：可以通过使用webpack的缓存功能，利用缓存来提高构建速度。可以配置webpack的cache和hardSourceWebpackPlugin等插件来实现缓存功能。
- 动态导入：使用webpack的动态导入功能，根据需要异步加载模块，可以提高应用的加载速度。可以使用import()语法或者使用webpack的require.ensure方法来实现动态导入。
总结起来，对于包含大量全局函数的大型JS文件，在webpack中可以通过按需加载、代码优化、Tree Shaking、缓存和动态导入等方式来处理，以优化文件体积和加载速度。需要根据具体的业务场景和需求选择合适的方法。对于腾讯云的相关产品，可以考虑使用腾讯云的云函数SCF、CDN加速等服务来提高应用的性能和稳定性。
腾讯云相关产品推荐：
- 云函数SCF：https://cloud.tencent.com/product/scf
- CDN加速：https://cloud.tencent.com/product/cdn
相关·内容
我正在处理的一个遗留项目目前有一个文件，其中包含在全局范围内定义的100个函数，依赖于JQuery (4k+ LOC)。该团队面临的一个问题是必须处理IE11，因为大多数客户仍在使用它。新团队也希望不必担心这一点，目前，我们已经设置了webpack来处理新功能。我们还希望将此应用于较旧的脚本，而不必重写所有内容。我知道webpack的意图是为前端
浏览 22提问于2021-08-04得票数 0
回答已采纳
1回答
假设我有一个包含全局函数的大型js文件，如：function b() ....
如何将它们导入webpack包并使用？需要/进口？
浏览 2提问于2017-11-27得票数 2
回答已采纳
我正在开发一个大型的单页面应用程序，其中包含非常大的CSS & JS文件，这些文件是由Webpack生成的，这会在应用程序最初加载时导致。为了避免这种情况，我希望将CSS的关键部分打印到文档头中，以便在浏览器处理JS和CSS的其余部分时，文档不会显示为未设置样式。此CSS是用SASS编写的，并且依赖于全局应用程序变量，因
浏览 2提问于2017-08-27得票数 1
2回答
现在Webpack在我的视野里，因为我正在走向反应。我离题了。将这些依赖项(按我选择的任何顺序)连接到适合浏览器的dependencies.js文件中(Browserify，对吗？)将上面的文件与我自己的JavaScript文件(按我选择的任何顺序)连接到一个all.min.js文件中，该文件被缩小，包装在一个
浏览 9提问于2016-11-17得票数 0
1回答
由于很少更新我在对接容器中的应用程序前端部分不能正常工作，它使用了100%以上的docker CPU，60/70%的我的笔记本CPU (风扇运行100%)，HMR非常慢 "description&qu
浏览 5提问于2020-05-20得票数 6
回答已采纳
1回答
我正在构建一个大型的React应用程序，它涉及处理大量数据、格式化数据并输出到表中。有时，这些函数是变量(例如const x= ()、=>等)。我将执行此格式化的函数存储在Typescript文件中，并将其导入到我的React组件中。的文件中(例如)。然后，我有了一个使用该函数的
浏览 0提问于2020-06-16得票数 1
将Webpack和Dart Sass VM合二为一。然后它会在2-3.5秒的时间内下降。我正在使用Webpack 5，最新版本的sass-loader和sass。我还包括了每个Webpacks推荐的Fibers，我真的没有看到任何改进。
我的JS不到一秒钟就编译了。我也尝试过Webpack缓存中</e
浏览 0提问于2021-02-28得票数 5
回答已采纳
1回答
devtool: "eval-source-map"然而，我正在尝试让webpack将jQuery导出为一个全局的(因为我使用的一些软件包寻找一个jQuery全局包)。webpack.config.js中包含webpack。就像我添加const webpack = require("webpack");一样，webpack</
浏览 0提问于2018-02-28得票数 0
回答已采纳
我对webpack完全陌生(我以前是通过“手工”包含大量css / js文件来构建我的应用程序的)，现在我正试图理解在使用命名工具时命名空间是如何工作的。require('./assets/sass/app.scss', 'public/css');
我的helperFunctions.
浏览 3提问于2018-01-19得票数 3
我正在使用Webpack开发一个大型应用程序，该应用程序包含所有其他模块都需要访问的全局settings.js文件。与其在所有模块的顶部添加一个import settings from '../path/to/settings';，我希望有一种更简洁的方法来默认情况下将它提供给所有模块。
向所有其他人添加一个全局可用的模块的建议？
浏览 1提问于2015-10-18得票数 1
回答已采纳
我打算在Oracle开发的一个无关的商业产品中使用一些功能。我将简单地包含javascript文件，然后在需要的地方引用供应商代码中的函数。但是，我想做一些转换，添加一些polly填充，并在包含它之前缩小代码。我想用webpack来自动实现这一点，但是由于我的入口点只包含在入口点没有使用的函数，所以它们没有包含
浏览 0提问于2018-03-29得票数 0
我在symfony中实现jquery第三方插件时遇到了问题，webpack安可。到目前为止，我有几个带有不同逻辑的.js文件，还有一些在twig文件中执行一些js的脚本。这是app.js：global.$ = global.jQuery = global.jquery = $;
require('
浏览 4提问于2018-11-18得票数 2
我正在测试Webpack的能力，并有一个有趣的用例，我不知道如何处理。也就是说，我有：
文件A.js：一个使用Webpack导入并定义了许多变量和实用程序函数的JS模块。文件B.js：从另一种编程语言生成的大型(>10 it ) JS文件，它应该使用A.js中定义<
浏览 3提问于2017-12-17得票数 1
addMethod.js
// do something比方说，我有一个函数add，它可以全局访问。但是当我将这个文件与webpack(v4)捆绑在一起时，当我在浏览器中运行该文件时，我遇到了一个错误add of undefined。到目前为止，在我的研究中，我只遇到过一些人建议全局函数和方法必须附加
浏览 2提问于2018-07-05得票数 2
我有一个大型的AngularJS应用程序，我正在升级过程中(与NgUpgrade，webpack等)。首先，我的新的角(4)组件是.ts文件，但我的旧AngularJS部件是.js文件，使用webpack的Babel加载程序进行转换。在大多数情况下，该应用程序只需将文件从.js重命名为.ts，并在顶部添加一个角度导入，就可以正常
浏览 3提问于2017-07-10得票数 1
回答已采纳
1回答
如何使用Webpack 4缩小文件？/******//******/ function __webpack_require我只想要一个文件中和一个缩小的文件出来。绝对没有额外的垃圾添加。
让我发疯的
浏览 2提问于2020-01-18得票数 6
回答已采纳
我在浏览器中将vue.js作为模块导入：但我明白错误在eval()中vue-cli-service --target lib生成的</
浏览 4提问于2019-09-17得票数 7
我正在探索在中使用的想法。
我已经阅读了快速入门指南，对Webpack的工作原理有了大致的了解，但我不清楚如何加载像jquery / like / underscore这样的依赖库。它们是否应该用<script>从外部加载，或者这是不是像RequireJS的填充程序一样，是Webpack可以处理的？根据的说法，ProvidePlugin和externals似乎与此相关
浏览 1提问于2014-04-26得票数 86
回答已采纳
11回答
在我的应用程序中，我使用Webpack创建两个入口点-- bundle.js用于所有JavaScript文件/代码，vendors.js用于所有库，如jQuery和React。我的webpack.config.js是这样的-var bower_dir = __dir
浏览 27提问于2015-03-10得票数 488
回答已采纳
2回答
我试图将ZeptoJS添加到我的webpack供应商包中，但是我一直收到一个错误声明：
table = document.createElement('table') <-- 'document' is undefined
下面是webpack配置<
浏览 5提问于2016-10-29得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
