use strict是什么及其优缺点

最新推荐文章于 2025-06-01 09:06:15 发布
最新推荐文章于 2025-06-01 09:06:15 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript use strict
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Alex_717/article/details/83029265
本文详细介绍了JavaScript中的严格模式('use strict')，解释了其如何消除代码中的不严谨和不合理之处，提高代码质量和运行安全性。同时，也探讨了严格模式在实际应用中可能遇到的问题，如压缩时的字节浪费和错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

'use strict' ：“严格模式”。就是Js代码运行时，自动地实现更严格的解析和错误处理方法。

 

优点：消除js代码中不严谨、不合理的地方；提高代码的质量，保证代码更安全地运行；压缩时，js文件体积会更小。

缺点：现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节；压缩时，又可能会出现错误。

渗透测试web未设置http头 Strict Transport Security
墨痕诉清风的博客
10-26 9521
HSTS(HTTP Strict Transport Security)是国际互联网工程组织IETF发布的一种互联网安全策略机制。采用HSTS策略的网站将保证浏览器始终连接到该网站的HTTPS加密版本，不需要用户手动在URL地址栏中输入加密地址，以减少会话劫持风险。HSTS响应头格式preload]max-age，单位是秒，用来告诉浏览器在指定时间内，这个网站必须通过HTTPS协议来访问。也就是对于这个网站的HTTP地址，浏览器需要先在本地替换为HTTPS之后再发送请求。...
大数据平台、计算平台、存储平台等各类技术整合及部署方案
AI天才研究院
07-30 1565
近几年来，随着互联网技术的飞速发展，大数据技术也呈现爆炸性增长，以数据采集、处理、分析等方式产生海量的数据。如何有效利用大数据的价值变得越来越迫切，因此出现了大数据相关的云服务提供商如亚马逊AWS、微软Azure等。而云服务中除了包括传统IT技术栈之外，还涉及到一些大数据平台技术，例如Hadoop、Spark、Hive、Pig等，这些平台技术可以帮助用户快速构建、管理、维护大数据平台。为了能够顺利运用大数据平台，用户需要在云平台上安装相应的组件，配置好集群参数，然后运行相关的应用作业，并进行相应的数据分析。
“use strict“：是JavaScript的救星还是束缚？
Web面试那些事儿的博客
01-21 1332
在接下来的部分，我们将深入探讨严格模式的各种优点，以帮助你更好地理解它为何被认为是JavaScript的救星。因此，在项目中要确保一致地使用严格模式。由于对代码执行的更严格要求，严格模式可以帮助JavaScript引擎更有效地进行优化，提高代码的性能。由于对代码的更严格要求，严格模式可以帮助JavaScript引擎更有效地进行优化，提高代码的性能。总的来说，我认为利大于弊，我从来不使用严格模式禁用的功能，因此我推荐使用严格模式。严格模式引入了一些新的保留字，强制开发者遵守更严格的规则，以确保代码的一致性。
Javascript 严格模式use strict详解
weixin_33725515的博客
12-31 212
1.概述 除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。   2.为什么用严格模式 - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; - 消除代码运行的一些不安全之处，保证代码运行的安全； - 提高编译器效率，增加运行速度； - 为未来...
JavaScript教程：深入理解严格模式（"use strict"）
gitblog_00677的博客
06-01 416
JavaScript教程：深入理解严格模式（"use strict"） 引言 在JavaScript的发展历程中，为了保持向后兼容性，语言的新特性不断增加，但旧有功能却从未改变。这种设计虽然确保了旧代码的稳定运行，但也导致了一些早期设计缺陷永远留在了语言中。直到ECMAScript 5（ES5）的出现，才通过引入"严格模式"（Strict Mode）来解决这...
什么是“use strict”,好处和坏处
热门推荐
薛跳跳的博客
05-30 5万+
use ‘strict’： "严格模式"是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个：1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;2. 消除代码运行的一些不安全之处，保证代码运行的安全；3. 提高编译器效率，增加运行速度；4. 为未来新版本的J...
javascript中“use strict”的好处和坏处
weixin_30293135的博客
01-10 137
1.为什么使用严格模式？ 消除javascript语法的一些不合理、不严谨之处，减少一些怪异行为； 消除代码运行的不安全之处，保证代码的运行； 提高编译效率，增加运行效率； 为未来新版本的javascript做好铺垫； 注：经过测试 IE6,7,8,9 均不支持严格模式。 2.缺点 现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 ...
什么是 "use strict"? 使用它的好处和坏处分别是什么？
weixin_30751947的博客
08-22 233
ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。 设立"严格模式"的目的，主要有以下几个： 1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; 2. 消除代码运行的一些不安全之处，保证代码运行的安全； 3. 提高编译器效率，增加运行速度； 4. 为未来新版本的...
关于laravel的一些基础问答
vbgesab的博客
05-30 1230
创建一个类来代表具体的功能，这个类中实现相关的方法。在目录下的某个服务提供者中，使用方法将 Facade 与具体的类关联起来。就可以在代码中通过该 Facade 来便捷地使用相关功能了。例如，假设有一个这样就定义好了与对应的 Facade。在 Laravel Modal 中使用自定义表可以通过 Eloquent ORM（对象关系映射）来实现。以下是一般的步骤：创建模型：为自定义表创建一个对应的模型类。模型类通常位于app/Models目录下。例如，如果你有一个名为的表，可以创建一个名为。
机器学习之自然语言处理——基于TfidfVectorizer和CountVectorizer及word2vec构建词向量矩阵（代码+原理）
迷茫与徘徊只会让你陷入绝境，欢迎私信博主，带你开始提升变现价值！
05-23 1805
目录理论知识准备构造文本特征向量TF-IDF 值sklearn中TfidfVectorizer代码实例CountVectorizer（）代码实操Word2Vec代码案例总结每文一语 理论知识准备 前期我们对分词进行了详细的讲解，那么分词之后，哪些关键词对一个文档才是重要的？比如可以通过单词出现的次数，次数越多就表示越重要。 构造文本特征向量 Count （文档：空格连接的字符串) TFIDF （文档：空格连接的字符串) Word2Vec （文档：分词列表) TF-IDF 值 单词的TF-I
javascript中的with语句学习笔记及用法
10-15
最后，`with`在严格模式（`'use strict';`）下是被禁止的，因为它可能导致难以预料的行为和错误。 为了避免这些问题，开发者通常会避免使用`with`语句，而是采用其他替代方法，比如使用对象的点操作符或方括号操作...
“use strict“是什么? 使用它有什么优缺点？
小草莓的博客
05-04 1558
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;② 严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷；"use strict" ：指定代码在严格条件下执行；- 消除代码运行的一些不安全之处，保证代码运行的安全；- 为未来新版本的Javascript做好铺垫。有时候，相同的代码，严格模式可以比非严格模式下。- 提高编译器效率，增加运行速度；① 禁止this关键字指向全局对象。② 禁止在函数内部遍历调用栈。⑤ 不能使用未声明的变量。③ 全局变量必须显式声明。
为什么使用"use strict"可以节约你的时间
weixin_34268753的博客
03-28 242
转： http://ourjs.com/detail/52f572bf4534c0d806000024 "use strict"是JavaScript中一个非常好的特性，而且非常容易使用。 使用方法   // file.js"use strict"function doStuff(){    // use strict is enabled here!} 这样佻的file.js都会应用上...
js strict
jcaksonsen的博客
05-09 398
JavaScript 严格模式(use strict) JavaScript 严格模式（strict mode）即在严格的条件下运行。 使用 "use strict" 指令 "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。 它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict"
jason_cuijiahui的博客
04-17 299
http://www.runoob.com/js/js-strict.html
use strict 是什么意思？使用它区别是什么？
weixin_62548988的博客
08-02 788
use strict 代表开启严格模式，这种模式下使得 JavaScript 在更严格的条件下运行，实行更严格解析和错误处理。
javascript 代码中的use strict是什么意思
LuckXinXin的博客
06-07 1030
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 JSON字符串转换为JSON对象: var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str); JSON对象转换为JSON字符串： var last=obj.toJSONString(); var last=JSON..
“use strict”的作用是什么？
高先生的猫
03-24 4001
use strict 出现在 JavaScript 代码的顶部或函数的顶部，可以帮助你写出更安全的 JavaScript 代码。如果你错误地创建了全局变量，它会通过抛出错误的方式来警告你。例如，以下程序将抛出错误： function doSomething(val) { "use strict"; x = val + 10; } 它会抛出一个错误，因为 x 没有被定义，并使用了全局...
什么是 “use strict”? 使用它的好处和坏处是什么？
weixin_30275415的博客
05-29 195
严格模式是ES5引入的，更好的将错误检测引入代码的方法。顾名思义，使得JS在更严格的条件下运行。 变量必须先声明，再使用 function test(){ "use strict"; foo = 'bar'; // Error } 不能对变量执行delete操作 var foo = "test"; function test(){} delete foo; // Error de...
'use strict'; const isProduction = process.env.NODE_ENV === 'production'; const webpack = require('webpack'); const merge = require('webpack-merge'); // webpack merge 工具包 const baseWebpackConfig = require('./webpack.base.conf'); // 基础配置引入 const TerserWebpackPlugin = require('terser-webpack-plugin'); // js压缩优先配置 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 提取单独打包css文件 const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const CssCustomSourcemapUrlPlugin = require('css-custom-sourcemap-url-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const WebpackObfuscator = require('webpack-obfuscator'); const config = require('../config'); function resolve(dir) { return path.join(__dirname, '..', dir); } const prodWebpackConfig = merge(baseWebpackConfig, { mode: 'production', // 设定环境 optimization: { // webpack4.0 新加优化策略 minimizer: [ new TerserWebpackPlugin({ parallel: true, // 开启并行压缩，充分利用cpu extractComments: false, // 移除注释 sourceMap: !isProduction, cache: true, terserOptions: { compress: { warnings: false, drop_debugger: true, drop_console: isProduction, }, output: { comments: false, // 移除所有注释 beautify: false, // 不美化，压缩成一行 ascii_only: true, // 只输出 ASCII 字符 }, }, }), new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { map: { inline: false, }, autoprefixer: false, }, }), new CssCustomSourcemapUrlPlugin({ append: config.build.sourcePath, }), ], splitChunks: { chunks: 'all', name: 'vendors', }, runtimeChunk: { name: 'manifest', }, }, plugins: [ new HtmlWebpackPlugin({ pageAnalyticScript: isProduction ? config.build.pageAnalyticScript : config.dev.pageAnalyticScript, pageProbeScript: isProduction ? config.build.pageProbeScript : config.dev.pageProbeScript, escapeScript: isProduction ? config.build.escapeScript : config.dev.escapeScript, inject: true, template: 'index.html', }), // css 提取 new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:7].css', chunkFilename: 'css/[id].[contenthash:7].css', sourceMap: true, ignoreOrder: true, }), new webpack.SourceMapDevToolPlugin( isProduction ? { filename: '[file].map', append: `\n//# sourceMappingURL=${config.build.sourcePath}[url]`, } : { filename: '[file].map', }, ), // 代码混淆插件，排除 vendor 和 manifest，仅生产环境启用 ...(isProduction ? [new WebpackObfuscator( { rotateStringArray: true, stringArray: true, stringArrayEncoding: ['rc4'], stringArrayThreshold: 1, compact: true, disableConsoleOutput: true, }, ['**/vendor*.js', '**/vendors~*.js', '**/manifest.*.js'] )] : []), // new BundleAnalyzerPlugin(), // 可视化打包 ], }); module.exports = prodWebpackConfig; 这串打包逻辑中 runtimeChunk: { name: 'manifest', }, 的作用是什么，manifest又是什么
最新发布
08-05
<think>我们正在讨论Webpack中的runtimeChunk配置和manifest文件的概念。根据引用内容，我们可以总结如下： 1. **manifest文件的作用**（引用[2]和引用[3]）： - manifest文件是Webpack在构建过程中生成的一个记录模块信息的文件。 - 它包含了模块的映射关系，以及加载和处理模块的逻辑。 - 当应用程序在浏览器中运行时，Webpack的运行时代码（runtime）会根据manifest文件来加载和处理模块。 2. **runtimeChunk配置的作用**（引用[1]和引用[5]）： - 在Webpack配置中，通过`optimization.runtimeChunk`可以将运行时代码（runtime）单独拆分成一个文件。 - 运行时代码包含Webpack用于管理模块加载和缓存的逻辑，它随着模块依赖关系的变化而变化。 - 将运行时代码单独拆分出来，可以避免因为运行时代码的变化而导致整个打包文件的内容哈希变化，从而利用浏览器缓存。 3. **为什么需要单独拆分runtimeChunk**： - 如果不拆分，运行时代码会内联在每一个入口文件中。当运行时代码发生变化时，即使业务代码没有变化，也会导致入口文件的哈希变化，从而使得浏览器缓存失效。 - 单独拆分后，运行时代码的变化只会影响单独的文件，而不会影响其他业务代码和第三方库的缓存。 4. **manifest与runtimeChunk的关系**： - 运行时代码（runtime）中包含了manifest数据，即模块的映射信息。 - 因此，当我们拆分runtimeChunk时，实际上就是将manifest数据单独提取到一个文件中。 5. **配置示例**（引用[1]）： ```javascript module.exports = { optimization: { runtimeChunk: 'single', // 或者指定一个自定义名称，如 "webpackManifest" }, plugins: [ new HtmlWebpackPlugin(), // 如果需要将runtime内联到HTML中，可以使用WebpackInlineManifestPlugin（注意：这个插件可能需要单独安装） new WebpackInlineManifestPlugin({ name: 'webpackManifest' // 这里应该与runtimeChunk的名称一致 }) ] }; ``` 6. **splitChunks与runtimeChunk**（引用[5]）： - splitChunks用于拆分公共模块（如第三方库），而runtimeChunk专门用于拆分运行时代码。 - 两者都是优化缓存的重要手段。 下面我们详细解释： ### 一、Webpack运行时代码（Runtime）是什么？ Webpack打包后的代码中，除了我们编写的模块代码，还有一部分是Webpack自己添加的运行时代码（runtime）。它是一小段管理模块加载、解析和执行的代码。例如，当我们使用动态导入（`import()`）时，运行时代码会负责异步加载模块。 ### 二、manifest文件 manifest文件是运行时代码所依赖的数据，它记录了： - 模块标识符（id）与模块路径（或chunk）的映射关系。 - 已经加载的模块信息。 - 异步加载的模块信息。 因此，运行时代码结合manifest数据，就能够知道如何加载模块。 ### 三、配置`runtimeChunk`的作用 在Webpack配置中，我们可以通过`optimization.runtimeChunk`将运行时代码（包括manifest数据）单独提取到一个文件中。这样做的好处是： 1. **缓存优化**：运行时代码通常比较小，但经常变动（例如，添加一个模块就会改变模块映射关系）。如果将其内联在入口文件中，那么每次构建后入口文件的哈希都会变化，导致浏览器缓存失效。单独提取后，只有这个运行时代码文件会变化，而其他文件（如业务代码、第三方库代码）的缓存可以继续使用。 2. **减小入口文件体积**：运行时代码单独分离，使得入口文件变小。 配置方式： - `runtimeChunk: 'single'`：将所有入口文件的运行时代码提取到一个文件中。 - `runtimeChunk: { name: entrypoint => 'runtime-'+entrypoint.name }`：为每个入口文件生成一个运行时代码文件（多入口时）。 ### 四、manifest文件与缓存 在引用[1]中提到了一个插件`WebpackInlineManifestPlugin`，它的作用是将运行时代码文件（即manifest）内联到HTML中，这样可以减少一个HTTP请求。但是，请注意，这个插件需要配合`HtmlWebpackPlugin`使用，并且要求运行时代码文件名称已知（通过`runtimeChunk`指定名称）。 ### 五、实际应用 在构建后，我们会得到类似这样的文件： - `main.[contenthash].js`：业务代码 - `vendors.[contenthash].js`：第三方库 - `runtime.[contenthash].js`：运行时代码（包含manifest） 然后在HTML中，我们需要先引入`runtime`，再引入其他文件（因为运行时代码负责加载模块）。 ### 六、注意事项 - 运行时代码文件很小，一般只有几KB，所以内联到HTML中也是可以的（如使用`WebpackInlineManifestPlugin`）。 - 在Webpack5中，默认的splitChunks配置（引用[5]）不会影响运行时代码的拆分，因为运行时代码的拆分是通过`runtimeChunk`单独配置的。 ### 总结 - **manifest**：Webpack生成的模块映射数据，用于运行时的模块加载。 - **runtimeChunk**：将Webpack的运行时代码（包含manifest）单独拆分成文件，用于优化缓存。 --- ### 相关问题 1. 如何配置Webpack以实现长期缓存（Long Term Caching）？ 2. Webpack中的`splitChunks`和`runtimeChunk`有什么区别？ 3. 如何将Webpack运行时代码内联到HTML中？这样做有什么优缺点？</think>### Webpack `runtimeChunk` 配置的作用及 `manifest` 文件的意义 #### 一、`runtimeChunk` 的核心作用 `runtimeChunk` 是 Webpack 优化配置中的关键选项，主要用于**分离 Webpack 的运行时代码**。它的核心价值体现在： 1. **缓存优化** ```javascript // webpack.config.js optimization: { runtimeChunk: 'single' // 或 { name: 'runtime' } } ``` - 将 Webpack 的**运行时代码**（runtime）从主包中分离出来[^1] - 运行时代码包含模块解析逻辑，即使业务代码不变，该部分也可能因依赖关系变化而改变 - 分离后可避免业务代码的哈希值因运行时代码变化而失效，提升缓存利用率[^4] 2. **减小主包体积** - 运行时代码通常只占 2-5KB，但分离后能避免重复打包到多个入口 - 多页面应用时效果更显著（每个入口共享同一份 runtime） 3. **提升加载性能** ```mermaid graph LR A[浏览器] --> B[加载runtime] --> C[加载业务代码] --> D[执行] ``` - 浏览器可并行加载 runtime 和业务代码 - 运行时代码优先加载可加速模块解析过程 #### 二、`manifest` 文件的本质 `manifest` 是 Webpack 构建过程中生成的**模块映射表**，其核心作用包括： 1. **模块路由功能** ```json // 典型manifest结构 { "3ea8": "src/utils.js", "a1f2": "node_modules/lodash.js", "runtime": "webpackBootstrap" } ``` - 记录模块 ID 与真实路径的映射关系[^2] - 运行时代码通过此表定位和加载模块 2. **依赖管理中枢** - 维护模块间的依赖拓扑关系 - 控制异步模块的加载时序（如 `import()` 动态导入）[^3] 3. **构建状态快照** - 包含当前构建的哈希值、模块版本信息 - 确保开发/生产环境模块解析一致性 #### 三、`runtimeChunk` 与 `manifest` 的协同关系 ```mermaid graph TD A[源码] --> B[Webpack构建] B --> C[runtimeChunk配置] C --> D{是否分离runtime} D -->|是| E[生成独立runtime文件<br>包含manifest数据] D -->|否| F[manifest内嵌到业务代码] E --> G[浏览器优先加载runtime] G --> H[通过manifest加载业务模块] ``` 1. **当启用 `runtimeChunk` 时** - manifest 会被打包进 runtime 文件（如 `runtime.xxx.js`） - 示例构建结果： ``` dist/ ├── main.1a2b3c.js # 业务代码 ├── vendor.4d5e6f.js # 第三方库 └── runtime.7g8h9i.js # 包含manifest的runtime ``` 2. **未启用 `runtimeChunk` 时** - manifest 会内联到每个入口文件的顶部 - 导致业务代码哈希值频繁变化[^1] #### 四、最佳实践建议 1. **基础配置方案** ```javascript // webpack.config.js module.exports = { optimization: { runtimeChunk: 'single', // 多页面应用 // 或 runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` // 单页面应用 } } } ``` 2. **配合缓存策略** ```html <!-- HTML中引用 --> <script src="/runtime.123abc.js" defer></script> <script src="/main.456def.js" defer></script> ``` - 为 runtime 文件设置长期缓存（如1年） - 业务代码使用内容哈希[^4] 3. **进阶优化组合** ```javascript optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all', // 同步+异步分包 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 } } } } ``` > **关键结论**：`runtimeChunk` 本质是通过分离包含 `manifest` 的运行时代码，解决模块解析逻辑与业务代码的耦合问题，实现更精细的缓存控制。这种分离使业务代码的哈希值仅随内容变化，显著提升缓存命中率[^1][^4]。 --- ### 相关问题 1. 如何配置 `splitChunks` 实现第三方库与业务代码的分离优化？ 2. 长期缓存策略中如何处理 CSS 文件的哈希问题？ 3. Webpack 的 `moduleIds: 'deterministic'` 配置对构建结果有何影响？ 4. 如何验证 Webpack 的缓存策略是否生效？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值