Webpack:什么是没有加载器的模块?如何优化它们?

Mat*_*ieu 10 webpack

我正在用来speed-measure-webpack-plugin衡量 Webpack 构建的性能,有些事情对我来说很神秘:当冷启动我的开发构建时,我发现这modules with no loaders是迄今为止最常见的模块类型,也是耗时最长的模块类型处理:

\n\n
 SMP  \xe2\x8f\xb1  Loaders\nmodules with no loaders took 48.51 secs\n  module count = 2963\ntypings-for-css-modules-loader, and\npostcss-loader, and\nless-loader took 41.81 secs\n  module count = 95\nts-loader took 39.55 secs\n  module count = 488\nbabel-loader took 4.12 secs\n  module count = 4\ncss-loader, and\npostcss-loader took 3.91 secs\n  module count = 1\nurl-loader took 1.13 secs\n  module count = 10\npegjs-loader took 0.723 secs\n  module count = 2\nstyle-loader, and\ntypings-for-css-modules-loader, and\npostcss-loader, and\nless-loader took 0.157 secs\n  module count = 95\nhtml-webpack-plugin took 0.045 secs\n  module count = 1\nstyle-loader, and\ncss-loader, and\npostcss-loader took 0.002 secs\n  module count = 1\n
Run Code Online (Sandbox Code Playgroud)\n\n

我的问题是:没有加载器的模块到底是什么?有没有办法列出所有没有加载程序的模块,以便我可以看到它们来自哪里,以及可以对它们做什么?

\n\n

我怀疑它们来自node_modules依赖项,但我不知道该怎么办......

\n

Mat*_*ieu 1

好的,删除includewebpack 配置的此规则中的选项后:

\n\n
      {\n        test: /\\.jsx?$/,\n        // include: path.resolve(__dirname, 'src'),\n        use: ['babel-loader'],\n      },\n
Run Code Online (Sandbox Code Playgroud)\n\n

我无法拥有没有加载器的模块,所以我假设它们都是来自node_modules.

\n\n

然而,令我失望的是,这实际上减慢了我的构建速度:

\n\n
 SMP  \xe2\x8f\xb1  Loaders\nbabel-loader took 1 min, 0.222 secs\n  module count = 2946\ntypings-for-css-modules-loader, and\npostcss-loader, and\nless-loader took 41.55 secs\n  module count = 95\nts-loader took 35.4 secs\n  module count = 488\ncss-loader, and\npostcss-loader took 26.68 secs\n  module count = 12\nmodules with no loaders took 5.18 secs\n  module count = 10\nurl-loader took 1.69 secs\n  module count = 25\npegjs-loader took 0.597 secs\n  module count = 2\nstyle-loader, and\ntypings-for-css-modules-loader, and\npostcss-loader, and\nless-loader took 0.104 secs\n  module count = 95\nhtml-webpack-plugin took 0.025 secs\n  module count = 1\nstyle-loader, and\ncss-loader, and\npostcss-loader took 0.009 secs\n  module count = 12\n
Run Code Online (Sandbox Code Playgroud)\n\n

我不相信有办法真正优化这个......

\n

  • 您的预感几乎肯定是正确的 - 这些文件是 `node_modules` js 文件。当您删除“include”时,您是在告诉 babel-loader 它需要对这些文件进行操作。这需要时间,但没有必要,因为 node_modules 中的 .js 文件应该准备好直接导入。“没有加载器的模块”本身并不是一件坏事。它只是表示 webpack 直接读取而不需要处理的文件。您的“node_modules”中可能有太多内容。您可以使用 [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) 来查看您的包内容。 (3认同)