如何避免讓webpack加載不必要的包文件？

Question

cldr-data是一個保存Unicode CLDR數據的npm模塊，它非常龐大（〜250 MB，大量的JSON文件）。開發人員可以直接挑選JSON文件，例如require("cldr-data/supplemental/likelySubtags")，或者他們可以使用它的API，例如require("cldr-data")("supplemental/likelySubtags")（相對於模塊明顯相對於模塊）。

當直接挑選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瘋狂 「的相關性的請求是一個表達式」。

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

looooooong重症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使用動態requierments和它的製作的WebPack瘋狂。我想require contexts可以幫助我在這種情況下給出#196。但是，我不知道如何。

在這裏找到問題文件：https://github.com/unindented/globalize-hello-world-webpack/。

任何幫助，非常感謝。

感謝

Answer 1

簡短的答案是使用靜態字符串，如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。

Answer 2

如果你想通過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東西如上？你可以很容易地得到一個像require('cldr-data').supplemental('likelySubtags'). That req part can be dynamic so this should work. You would just write the missing ./ and .json`這樣的API。當然，您可以根據自己的喜好自由更改API。這只是我提出的第一個想法。