[英]What does the mode parameter do in the webpack.config.js file?
I am working on a project using Webpack , and I happened to notice a parameter in the object called mode
.我正在使用Webpack进行一个项目,我碰巧注意到 object 中的一个参数称为
mode
。
According to the documentation, it has two possible values (both are a string
).根据文档,它有两个可能的值(都是
string
)。 One is development
, and the other is production
.一个是
development
,另一个是production
。
Below is a part of my webpack.config.js
file.下面是我的
webpack.config.js
文件的一部分。
module.exports = {
mode: "development",
};
I can already infer that development
will be slower, and production
will be faster.我已经可以推断
development
会更慢,而production
会更快。 However, what makes the code slower in development
?但是,是什么让代码在
development
中变慢了呢?
production mode used to optimize all JS files, whereas development mode keeps the JS file as it.生产模式用于优化所有 JS 文件,而开发模式则保留 JS 文件。
Below are the differences of what Webpack compiles your code to depending on your mode
.以下是Webpack根据您的
mode
编译您的代码的不同之处。
development
mode development
模式This mode uses the eval()
function to execute all of your code in a string.此模式使用
eval()
function 执行字符串中的所有代码。 It does not make it smaller, except for the fact that it places all of your code on one line.它不会使它变小,除了将所有代码放在一行之外。
The eval()
function is slower then normal JavaScript (quote from MDN below), so it is not recommended to use this in production ! eval()
function 比正常的 JavaScript 慢(引用自下面的 MDN),因此不建议在生产中使用它!
From MDN:来自 MDN:
eval()
is also slower than the alternatives, since it has to invoke the JavaScript interpreter, while many other constructs are optimized by modern JS engines.eval()
也比其他方法慢,因为它必须调用 JavaScript 解释器,而现代 JS 引擎优化了许多其他结构。
production
mode production
方式In production
mode, Webpack will properly make your code much smaller in size (without using the eval()
function).在
production
模式下, Webpack将适当地使您的代码大小更小(不使用eval()
函数)。
Always use this mode in production!始终在生产中使用此模式!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.