use strict是什么及其优缺点

本文详细介绍了JavaScript中的严格模式('use strict'),解释了其如何消除代码中的不严谨和不合理之处,提高代码质量和运行安全性。同时,也探讨了严格模式在实际应用中可能遇到的问题,如压缩时的字节浪费和错误。

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

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

 

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

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

'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、付费专栏及课程。

余额充值