webpack - 如何正确使用 webpack 的 ReplaceSource 优化部分模块?
问题描述
我注意到在我的构建中跨模块存在一些重复的代码。我想通过编写一个 webpack 插件来优化我的 JavaScript,以查找 X 代码的实例并将其替换为简化版本的 Y 代码。
我已经制作了一个简单的 webpack 插件,看起来很接近,但它并没有完全达到我想要的效果。没有太多关于正确使用 webpack 之类的文档ReplaceSource
,甚至没有多少关于这种操作的正确生命周期的文档。所以我这里的内容主要是通过阅读 webpack 源代码和在 GitHub 搜索中拼凑而成的。
const { ReplaceSource } = require('webpack-sources');
const codeMapEntries = Object.entries({
'const from = "complicated code from example";': 'const from = somethingSimpler;',
});
class ReplaceCodePlugin {
apply(compiler) {
compiler.plugin('compilation', (compilation) => {
compilation.plugin('optimize-modules', (modules) => {
modules.forEach((module) => {
if (module._source && module._source._value) {
let source;
codeMapEntries.forEach(([fromCode, toCode]) => {
const startPos = module._source._value.indexOf(fromCode);
if (startPos !== -1) {
if (!source) {
source = new ReplaceSource(module._source);
}
source.replace(
startPos,
startPos + fromCode.length - 1,
toCode
);
}
});
if (source) {
module._source = source;
}
}
});
});
});
}
}
module.exports = ReplaceCodePlugin;
这似乎适用于一些简单的情况,但这里有些地方不正确,它会导致代码奇怪地混乱,然后导致我们的 minifier 像这样抱怨:
SyntaxError: Unexpected token keyword «if», expected punc «,»
3417 | }, {
3418 | key: 'componentWillUnmount',
> 3419 | value: ffalse if (!Waypoint.getWindow()) {
| ^
3420 | return;
3421 | }
3422 |
这让我相信我没有ReplaceSource
正确使用。
我还注意到出现了一些类似下面的代码,这看起来很奇怪:
var ___webpack_require__r"Jmof"= require('some-package');
var _somePackage2 = _interopRequir__webpack_require__t"yu5W"kage);
我什至不确定这是否是正确的方法,并对替代解决方案的建议持开放态度。
解决方案
我能够通过使用 optimize-chunk-assets 编译钩子而不是 optimize-modules 编译钩子来完成这项工作。但是,我真的不明白为什么一个有效而另一个无效。作为参考,这是我的插件的工作版本:
const { ReplaceSource } = require('webpack-sources');
const codeMapEntries = Object.entries({
'const from = "complicated code from example";': 'const from = somethingSimpler;',
});
class ReplaceCodePlugin {
apply(compiler) {
compiler.plugin('compilation', (compilation) => {
compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
function getAllIndices(str, searchStr) {
let i = -1;
const indices = [];
while ((i = str.indexOf(searchStr, i + 1)) !== -1) {
indices.push(i);
}
return indices;
}
chunks.forEach((chunk) => {
chunk.files.forEach((file) => {
let source;
const originalSource = compilation.assets[file];
codeMapEntries.forEach(([fromCode, toCode]) => {
const indices = getAllIndices(originalSource.source(), fromCode);
if (!indices.length) {
return;
}
if (!source) {
source = new ReplaceSource(originalSource);
}
indices.forEach((startPos) => {
const endPos = startPos + fromCode.length - 1;
source.replace(startPos, endPos, toCode);
});
});
if (source) {
// eslint-disable-next-line no-param-reassign
compilation.assets[file] = source;
}
callback();
});
});
});
});
}
}
module.exports = ReplaceCodePlugin;
推荐阅读
- unity3d - Vungle 中介适配器在 Unity 中不起作用
- javascript - 如何在 Vue 组件中使用依赖项?
- javascript - 如何以相同的方法获取文件名
- c# - 无法启动 Kestrel。无法绑定到已在使用的地址地址
- java - 我们可以修改cordova插件(cordova-plugin-fcm)并在我们的项目中使用吗?
- javascript - javascript setinterval 崩溃资源管理器 11 选项卡
- c# - Docusign CreateConsoleview 返回网址不起作用
- laravel - 作曲家转储自动加载什么都不做
- java - 我们可以通过map调用函数吗,在Hashmap函数的值中传递函数名
- html - 在元素两侧平均分配溢出文本