温馨提示:这篇文章已超过461天没有更新,请注意相关的内容是否还可用!
摘要:Webpack可以实现对JS代码的压缩,通过配置可以移除console debug信息,删除注释,同时保留函数名。还可以实现并行压缩以提高压缩效率。如果需要,还可以指定不压缩某些函数。这种压缩方式有助于减小JS文件的大小,提升网页加载速度,优化用户体验。
Webpack 默认的压缩配置(即使用内置的 TerserPlugin)通常包括类似 terserOptions 中的一些基本设置,但可能不会涵盖所有可用的 Terser 选项。默认的压缩通常会移除未使用的代码(tree shaking)、删除注释、缩短变量名(混淆)、删除不必要的空白和换行符等。

(图片来源网络,侵删)
Webpack 默认配置可能不包含 drop_console、drop_debugger、pure_funcs、mangle 等高级选项的显式设置。这些选项需要你在自定义的 TerserPlugin 配置中明确指定。
对于 parallel 和 extractComments 选项,Webpack 默认的 TerserPlugin 配置也不会包含这些设置。如果你想要使用这些功能,你需要像你在示例代码中那样明确添加 TerserPlugin 并配置这些选项。

(图片来源网络,侵删)
terser-webpack-plugin压缩代码实现的功能如下,
// webpack.config.js const TerserPlugin = require('terser-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: 'main.js', }, mode: 'production', devtool: 'source-map', // 启动源映射(默认为false) optimization: { minimizer: [ new TerserPlugin({ terserOptions: { // 压缩选项 compress: { drop_console: true, // 移除console drop_debugger: true, // 移除断点功能 pure_funcs: ['console.log'], // 移除指定函数 }, // 输出选项 output: { // comments: false, // 删除所有注释 beautify: false, // 不美化输出(默认) }, // 混淆选项, 默认会替换所有变量名,通过该选项控制替换变量名 mangle: { properties: true, // 替换对象属性名 keep_classnames: true, // 保留类名 keep_fnames: true, // 保留函数名 }, }, parallel: true, // 并行压缩,提高构建效率, // 尝试自动检测 CPU 核心数量 parallel: 4, // 指定 4 个 worker 进程 extractComments: false, // 提取注释到单独文件 }) ] } }
// src/index.js let a = 1; //TEST a+=1 console.log(a)
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...