webpack--指定文件跳过编译

好文推荐

localStorage的别样用法

背景

开发迭代中，由于需求的变化，会存在部分模块后续不再使用的情况，一般都只是从菜单权限上进行禁用，而对于源代码，不会直接进行删除，因此就需要一种机制能够排除掉暂时不用的模块从而提高打包效率

文章只大致写下思路，具体可以看github源码，然后，如果觉得对您有用，希望能得到您的star

思路

• 通过对指定的模块进行判定，在匹配时进行过滤，这通过beforeResolve可以很容易的做到

• 开发中往往会相互引用模块，所以直接一刀切肯定不行，因此还需要去分析其引用关系，这可以在buildStart中实现

安装与使用

• 安装

yarn add webpack-skip-compile

const SkipCompile = require("webpack-skip-compile")
new SkipCompile('src/pages',[
    'dataCenter'
],{
    alias:[{
        key:'@',
        value:resolve('src')
      }],
    include:['.vue']
})

效果对比

• 使用插件前

image.png

• 使用插件后

image.png

实现

• buildStart

在服务的启动阶段，我们依次读取文件，并解析其import引入

for (let i = 0; i < files.length; i++) {
      const file = files[i];
      if (fs.existsSync(file)) {
        const code = fs.readFileSync(file, "utf-8");
        const jsCode = getCode(strip(code));
        if (jsCode.trim()) {
          // fs.writeFileSync(tPath, jsCode);
          const imps = parseImports(jsCode);
          
        }
    }
}

然后去判断当前文件中是否引入了被跳过编译的文件

const igIndex = igs.findIndex((ig) => actualImp.includes(ig) );

只有自身未被设置跳过编译，并且引用了被跳过编译的文件时，向用户输出提示，并不再接管编译操作

if (igIndex > -1) {
   const isIg =  igs.find(i=>file.includes(i))
   if(isIg) continue
   console.warn(
         `文件(${file})中的(${imp})与配置的文件(${this.igs[igIndex]})存在引用关系，请检查`
    );
   global.conflict = true;
   break;
}

• beforeResolve

只有通过引用关系检查后，才允许做跳过处理

const { context = "", request = "" } = payload || {};
if (request.includes("node_modules")) return payload;
const igs = global.igs
const absolutePath = path.resolve(context, request);
if (igs.find(v=>absolutePath.includes(v))) {
   return null
}
return payload;