webpack,vite为JS、HTML、CSS开启条件编译,宏剔除,代码剔除

webpack,vite为JS、HTML、CSS开启条件编译,宏剔除,代码剔除

• 需求背景/用户故事
• 方式1 宏注释
• 方式2 **UglifyJsPlugin**
• 方式3 conditional-webpack-plugin
• 方式4 Terser
• ?terser Vite配置
• ? terser Webpack
• ? 参考文章

需求背景/用户故事

1. 不使用mock的那部分假数据，总不能放在代码里发布生产环境吧？

2. debug工具代码，如移动端比较流行的vconsole插件，我们不希望测试前引入这份代码，发布生产的时候手动关闭这部分代码吧，我们需要一个功能去自动化引入和移除。

3. 使用JS做游戏，开发时引用了大量debug代码，然后打包后因为代码中还有引用没有成为dead code被剔除，从而导致了包体较大。

4. 希望开发时用的测试API接口不会出现在打包后的代码中。

5. 网页在桌面端和移动端希望使用不同的CSS，互相不影响包体。

在以上这些情况中都很适合做条件编译，让不希望在生产环境出现的相关代码彻底消失。
那么在目前主流的vite，webpack打包工具中如何实现这种效果呢。

// main.js
if (DEBUG) {
   
    console.log("debug stuff");
    const donotLikeDropConsole = 'donotLikeDropConsole';
    console.log(donotLikeDropConsole);
}else{
   
  	console.log("noting");
}
// dist.js
console.log("noting");

方式1 宏注释

这种方式非常简单，但不太灵活，原理是利用注释声明起点和终点，再利用正则删除注释和注释中的代码。

这里给出Unix下使用sed的示例

# 去除文件夹echatim 下所有IFTRUE_WXAPP的平台相关代码
for f in `find . echatim -name '*.ts'`; do echo $f  && sed -e ':a' -e 'N' -e '$!ba' -e 's/[ ]*\/\*IFTRUE_WXAPP\*\/.*\n.*\/\*FITRUE_WXAPP\*\// /g' -i '' $f; done

也可以使用webpack下的js-conditional-compile-loader插件来实现，但它目前只支持JS

module: {