如何避免让 webpack 加载不必要的包文件？

Question

cldr-data 是一个保存 Unicode CLDR 数据的 npm 模块，它非常大（~250 MB，很多 JSON 文件）。开发人员可以直接挑选 JSON 文件，例如 require("cldr-data/supplemental/likelySubtags") 或者他们可以使用它的 API，例如 require("cldr-data")("supplemental/likelySubtags")（相对于 return require("./" + path)显然是模块）。

当直接挑选 JSON 文件时，webpack 解决了直接的要求并且它工作得很好。

// "cldr-data/supplemental/likelySubtags.json" is a JSON file.
var likelySubtags = require("cldr-data/supplemental/likelySubtags");

快速构建：

$ npm run build

> globalize-hello-world-webpack@ build /tmp/globalize-hello-world-webpack
> webpack

Hash: 4cb435ab9977c41bb6e0
Version: webpack 1.9.12
Time: 420ms
    Asset    Size  Chunks             Chunk Names
bundle.js  323 kB       0  [emitted]  main
   [0] ./main.js 1.26 kB {0} [built]
    + 18 hidden modules

当使用 API 时，webpack 变得疯狂 "request of a dependency is an expression"。

// "cldr-data/supplemental/likelySubtags.json" is a JSON file.
var cldrData = require("cldr-data");
var likelySubtags = cldrData("supplemental/likelySubtags");

loooooooong intensive-CPU 损坏的构建：

npm run build
Hash: 74a65b11c84ec356ac8d
Version: webpack 1.9.12
Time: 496679ms
    Asset    Size  Chunks             Chunk Names
bundle.js  173 MB       0  [emitted]  main
   [0] ./main.js 1.54 kB {0} [built]
   [1] . ^\.\/.*$ 363 bytes {0} [built] [3 warnings]
   [2] ./README.md 0 bytes [optional] [built] [failed]
   [4] ./output/bundle.js 323 kB {0} [optional] [built]
   [6] ./webpack.config.js 359 bytes {0} [optional] [built]
    + 12155 hidden modules

WARNING in ./main.js
Critical dependencies:
10:1-39 the request of a dependency is an expression
7:1-44 the request of a dependency is an expression
8:1-42 the request of a dependency is an expression
9:1-42 the request of a dependency is an expression
11:1-49 the request of a dependency is an expression
12:1-50 the request of a dependency is an expression
13:1-44 the request of a dependency is an expression
14:1-45 the request of a dependency is an expression
15:1-45 the request of a dependency is an expression
 @ ./main.js 10:1-39 7:1-44 8:1-42 9:1-42 11:1-49 12:1-50 13:1-44 14:1-45 15:1-45

WARNING in ./~/cldr-data/DCO.md
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/DCO.md Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| If you would like to make a contribution to cldr-data-npm, please certify to the following:
| 
| ---
 @ ./~/cldr-data ^\.\/.*$

WARNING in ./~/cldr-data/LICENSE
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/LICENSE Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE
| 
|     Unicode Data Files include all data files under the directories
 @ ./~/cldr-data ^\.\/.*$

WARNING in ./~/cldr-data/LICENSE-MIT
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/LICENSE-MIT Line 1: Unexpected number
You may need an appropriate loader to handle this file type.
| Copyright (c) 2013 Rafael Xavier de Souza http://rafael.xavier.blog.br
| 
| Permission is hereby granted, free of charge, to any person
 @ ./~/cldr-data ^\.\/.*$

WARNING in ./~/cldr-data/README.md
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/README.md Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| # cldr-units-modern
| 
| This repository provides the a portion of the JSON distribution of CLDR locale data
 @ ./~/cldr-data ^\.\/.*$

WARNING in ./~/cldr-data/install.js
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/install.js Line 50: Illegal return statement
You may need an appropriate loader to handle this file type.
|     "listed under `dependencies` of the `package.json` of your application."
|   );
|   return process.exit(0);
| }
| 
 @ ./~/cldr-data ^\.\/.*$

WARNING in . ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ . ^\.\/.*$

WARNING in . ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ . ^\.\/.*$

WARNING in ./README.md
Module parse failed: /tmp/globalize-hello-world-webpack/README.md Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| # Hello World (Webpack)
| 
| Project loading `globalize` through `webpack`:
 @ . ^\.\/.*$

ERROR in ./~/cldr-data/Gruntfile.js
Module not found: Error: Cannot resolve module 'matchdep' in /tmp/globalize-hello-world-webpack/node_modules/cldr-data
 @ ./~/cldr-data/Gruntfile.js 40:2-23

cldr-data exported API uses dynamic requierments and it's making webpack crazy. I suppose require contexts could help me out in this scenario given #196。但是，我不知道怎么办。

在此处查找问题文件：https://github.com/unindented/globalize-hello-world-webpack/。

非常感谢任何帮助。

谢谢

Answer 1

如果你想通过 require.context，它在消费者端看起来像这样：

var req = require.context('cldr-data/supplemental');
var likelySubtags = req('./likelySubtags.json');

我觉得这不太好。我尝试反对 require.context('cldr-data') 但随后我们又回到了缓慢构建的世界。我认为在那种情况下，它必须遍历整个包才能构建查找。

var likelySubtags = require('cldr-data/supplemental/likelySubtags'); 目前对我来说似乎是最明智的选择。

也许中间有一个 Webpack 适配器可以隐藏上面的 require.context 东西？您可以很容易地以 API 结束，例如 require('cldr-data').supplemental('likelySubtags'). Thatreqpart can be dynamic so this should work. You would just write the missing./and.json`。当然，您可以根据自己的喜好随意更改 API。这只是我想到的第一个想法。

Answer 2

简短的回答是使用像 require("cldr-data/<path>").

这样的静态字符串

如果您真的想使用API，请根据How to prevent moment.js from loading locales with webpack?使用ContextReplacementPlugin插件。虽然，API（例如，.entireMainFor("en")）的好处丢失了，因为您将不得不重复努力更改插件以反映您的需要。例如：

var webpack = require("webpack");

module.exports = 
...
  plugins: [
    new webpack.ContextReplacementPlugin(/cldr-data$/, /supplemental/)
  ]
};

感谢@bebraw 和@sokra 的帮助。

如何避免让 webpack 加载不必要的包文件？

How to avoid having webpack to load unnecessary package files?

webpack