webpack |
您所在的位置：网站首页 › 安装了vuecli还要安装webpack吗 › webpack |
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'] }) 复制代码 效果对比 使用插件前在服务的启动阶段，我们依次读取文件，并解析其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; 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |