正在为生产缩减的依赖项构建webpack

Building webpack for production - minified dependencies

本文关键字：依赖构建 webpack 更新时间：2023-09-26

假设npm上有一个名为"awesomepackage"的模块。我可以通过package.json将其注册为我的应用程序的依赖项，如下所示：

npm i --save awesomepackage

检查我的node_modules文件夹，我看到一个名为"awesomepackage"的文件夹，它看起来像这样：

- index.js
- package.json
- README.md
- lib/
    - awesomepackage.min.js

我可以在自己的应用程序中使用这个包，如下所示：

import {AwesomeThing} from 'awesomepackage';

我的问题：

当我使用webpack构建应用程序时，我的最终bundle.js总是包含来自node_modules/awesomepackage/index.js的源代码，而不考虑我设置的任何环境变量（例如NODE_ENV=production）。

如果预先构建的文件（如node_modules/awesomepackage/lib/awesomepackage.min.js）作为NPM包的一部分提供，有没有任何方法可以告诉webpack使用这些文件，而不是从源代码重新构建？

我见过在webpack配置中使用resolve.alias和noParse的解决方案，其中包含缩小源文件的硬编码路径，但这不是主要违背了使用npm和webpack的目的吗？我不想硬编码和维护每个依赖项的缩小构建文件的路径！

我之所以来到这里，是因为当我添加moment.js时，我的bundle.js跳了2.5mb——它缩小了167kb，包括所有的语言环境，但其中的源代码包括2mb的测试。

编辑

显然，它不仅仅是在最后缩小最终的bundle.js文件。例如：为什么有人想在最终的生产代码中包含数百个不必要的依赖性单元测试？他们没有。这就是为什么大多数库都提供dist（或类似的）文件夹作为其npm模块的一部分。

让我们考虑一下您的moment包。

你可以随时使用

import moment from 'node_modules/moment/min/moment-with-locales.min.js'

但这不是一个好主意。

你不应该在webpack中使用缩小的文件

如果您使用

import moment from 'moment';

它将从源代码构建模块。但如果您在webpack配置文件中有缩小过程，它应该不会比附带的.min.js文件大太多。通常，您自己的构建可能比原始.min.js更小！

瞬间实验

在添加moment及其190kB后，我测量了我的bundle.js的额外大小，原始moment/min/moment-with-locales.min.js的大小为207kB。您的2.5 MB可能是添加了地图（在我的地图配置中，moment权重2.7 MB

 [373] ./~/moment/moment.js 135 kB {0} [built]
 [374] ./~/moment/locale/af.js 2.62 kB {0} [optional] [built]
 [375] ./~/moment/locale/ar-ma.js 2.12 kB {0} [optional] [built]
 [376] ./~/moment/locale/ar-sa.js 3.16 kB {0} [optional] [built]
 [377] ./~/moment/locale/ar-tn.js 1.97 kB {0} [optional] [built]
 [378] ./~/moment/locale/ar.js 4.59 kB {0} [optional] [built]
 [379] ./~/moment/locale/az.js 3.35 kB {0} [optional] [built]
 [380] ./~/moment/locale/be.js 4.86 kB {0} [optional] [built]
 [381] ./~/moment/locale/bg.js 3.1 kB {0} [optional] [built]
 [382] ./~/moment/locale/bn.js 3.62 kB {0} [optional] [built]
 [383] ./~/moment/locale/bo.js 3.87 kB {0} [optional] [built]
 [384] ./~/moment/locale/br.js 3.44 kB {0} [optional] [built]
 [385] ./~/moment/locale/bs.js 4.7 kB {0} [optional] [built]
 [386] ./~/moment/locale/ca.js 2.97 kB {0} [optional] [built]
 [387] ./~/moment/locale/cs.js 6.4 kB {0} [optional] [built]
 [388] ./~/moment/locale/cv.js 2.33 kB {0} [optional] [built]
 [389] ./~/moment/locale/cy.js 2.92 kB {0} [optional] [built]
 [390] ./~/moment/locale/da.js 2.07 kB {0} [optional] [built]
 [391] ./~/moment/locale/de-at.js 3.03 kB {0} [optional] [built]
 [392] ./~/moment/locale/de.js 2.95 kB {0} [optional] [built]
 [393] ./~/moment/locale/dv.js 2.69 kB {0} [optional] [built]
 [394] ./~/moment/locale/el.js 3.73 kB {0} [optional] [built]
 [395] ./~/moment/locale/en-au.js 2.32 kB {0} [optional] [built]
 [396] ./~/moment/locale/en-ca.js 2.2 kB {0} [optional] [built]
 [397] ./~/moment/locale/en-gb.js 2.38 kB {0} [optional] [built]
 [398] ./~/moment/locale/en-ie.js 2.37 kB {0} [optional] [built]
 [399] ./~/moment/locale/en-nz.js 2.32 kB {0} [optional] [built]
 [400] ./~/moment/locale/eo.js 2.67 kB {0} [optional] [built]
 [401] ./~/moment/locale/es.js 2.97 kB {0} [optional] [built]
 [402] ./~/moment/locale/et.js 3.14 kB {0} [optional] [built]
 [403] ./~/moment/locale/eu.js 2.39 kB {0} [optional] [built]
 [404] ./~/moment/locale/fa.js 3.27 kB {0} [optional] [built]
 [405] ./~/moment/locale/fi.js 3.86 kB {0} [optional] [built]
 [406] ./~/moment/locale/fo.js 2.1 kB {0} [optional] [built]
 [407] ./~/moment/locale/fr-ca.js 2.09 kB {0} [optional] [built]
 [408] ./~/moment/locale/fr-ch.js 2.25 kB {0} [optional] [built]
 [409] ./~/moment/locale/fr.js 2.24 kB {0} [optional] [built]
 [410] ./~/moment/locale/fy.js 2.64 kB {0} [optional] [built]
 [411] ./~/moment/locale/gd.js 2.63 kB {0} [optional] [built]
 [412] ./~/moment/locale/gl.js 2.77 kB {0} [optional] [built]
 [413] ./~/moment/locale/he.js 3.41 kB {0} [optional] [built]
 [414] ./~/moment/locale/hi.js 3.88 kB {0} [optional] [built]
 [415] ./~/moment/locale/hr.js 4.83 kB {0} [optional] [built]
 [416] ./~/moment/locale/hu.js 4 kB {0} [optional] [built]
 [417] ./~/moment/locale/hy-am.js 3.22 kB {0} [optional] [built]
 [418] ./~/moment/locale/id.js 2.94 kB {0} [optional] [built]
 [419] ./~/moment/locale/is.js 4.43 kB {0} [optional] [built]
 [420] ./~/moment/locale/it.js 2.46 kB {0} [optional] [built]
 [421] ./~/moment/locale/ja.js 2.21 kB {0} [optional] [built]
 [422] ./~/moment/locale/jv.js 2.94 kB {0} [optional] [built]
 [423] ./~/moment/locale/ka.js 3.15 kB {0} [optional] [built]
 [424] ./~/moment/locale/kk.js 2.68 kB {0} [optional] [built]
 [425] ./~/moment/locale/km.js 2.02 kB {0} [optional] [built]
 [426] ./~/moment/locale/ko.js 2 kB {0} [optional] [built]
 [427] ./~/moment/locale/ky.js 2.69 kB {0} [optional] [built]
 [428] ./~/moment/locale/lb.js 4.92 kB {0} [optional] [built]
 [429] ./~/moment/locale/lo.js 2.32 kB {0} [optional] [built]
 [430] ./~/moment/locale/lt.js 4.37 kB {0} [optional] [built]
 [431] ./~/moment/locale/lv.js 3.9 kB {0} [optional] [built]
 [432] ./~/moment/locale/me.js 4.1 kB {0} [optional] [built]
 [433] ./~/moment/locale/mk.js 3.11 kB {0} [optional] [built]
 [434] ./~/moment/locale/ml.js 2.81 kB {0} [optional] [built]
 [435] ./~/moment/locale/mr.js 5.39 kB {0} [optional] [built]
 [436] ./~/moment/locale/ms-my.js 2.86 kB {0} [optional] [built]
 [437] ./~/moment/locale/ms.js 2.85 kB {0} [optional] [built]
 [438] ./~/moment/locale/my.js 2.73 kB {0} [optional] [built]
 [439] ./~/moment/locale/nb.js 2.23 kB {0} [optional] [built]
 [440] ./~/moment/locale/ne.js 3.81 kB {0} [optional] [built]
 [441] ./~/moment/locale/nl.js 2.63 kB {0} [optional] [built]
 [442] ./~/moment/locale/nn.js 2.09 kB {0} [optional] [built]
 [443] ./~/moment/locale/pa-in.js 4.01 kB {0} [optional] [built]
 [444] ./~/moment/locale/pl.js 3.94 kB {0} [optional] [built]
 [445] ./~/moment/locale/pt-br.js 2.23 kB {0} [optional] [built]
 [446] ./~/moment/locale/pt.js 2.34 kB {0} [optional] [built]
 [447] ./~/moment/locale/ro.js 2.61 kB {0} [optional] [built]
 [448] ./~/moment/locale/ru.js 7.08 kB {0} [optional] [built]
 [449] ./~/moment/locale/se.js 2.23 kB {0} [optional] [built]
 [450] ./~/moment/locale/si.js 2.43 kB {0} [optional] [built]
 [451] ./~/moment/locale/sk.js 5.49 kB {0} [optional] [built]
 [452] ./~/moment/locale/sl.js 6.16 kB {0} [optional] [built]
 [453] ./~/moment/locale/sq.js 2.45 kB {0} [optional] [built]
 [454] ./~/moment/locale/sr-cyrl.js 4.1 kB {0} [optional] [built]
 [455] ./~/moment/locale/sr.js 4.09 kB {0} [optional] [built]
 [456] ./~/moment/locale/ss.js 3.12 kB {0} [optional] [built]
 [457] ./~/moment/locale/sv.js 2.4 kB {0} [optional] [built]
 [458] ./~/moment/locale/sw.js 2.08 kB {0} [optional] [built]
 [459] ./~/moment/locale/ta.js 4.21 kB {0} [optional] [built]
 [460] ./~/moment/locale/te.js 3.09 kB {0} [optional] [built]
 [461] ./~/moment/locale/th.js 2.4 kB {0} [optional] [built]
 [462] ./~/moment/locale/tl-ph.js 2.14 kB {0} [optional] [built]
 [463] ./~/moment/locale/tlh.js 4.09 kB {0} [optional] [built]
 [464] ./~/moment/locale/tr.js 2.9 kB {0} [optional] [built]
 [465] ./~/moment/locale/tzl.js 3.59 kB {0} [optional] [built]
 [466] ./~/moment/locale/tzm-latn.js 2.11 kB {0} [optional] [built]
 [467] ./~/moment/locale/tzm.js 2.06 kB {0} [optional] [built]
 [468] ./~/moment/locale/uk.js 5.4 kB {0} [optional] [built]
 [469] ./~/moment/locale/uz.js 2.03 kB {0} [optional] [built]
 [470] ./~/moment/locale/vi.js 2.71 kB {0} [optional] [built]
 [471] ./~/moment/locale/x-pseudo.js 2.5 kB {0} [optional] [built]
 [472] ./~/moment/locale/zh-cn.js 4.35 kB {0} [optional] [built]
 [473] ./~/moment/locale/zh-tw.js 3.12 kB {0} [optional] [built]
 [474] ./~/moment/locale ^'.'/.*$ 2.41 kB {0} [optional] [built]

那么，为什么您的自定义构建较小呢？你可以使用更激进的缩小。我的构建给了我这个信息（可能在这一点上有一些松动）：

Condition always true [./~/moment/moment.js:8,0] Condition always true [./~/moment/locale/af.js:6,0] Condition always true [./~/moment/locale/ar-ma.js:7,0] Condition always true [./~/moment/locale/ar-sa.js:6,0] Condition always true [./~/moment/locale/ar-tn.js:5,0] Condition always true [./~/moment/locale/ar.js:8,0] Condition always true [./~/moment/locale/az.js:6,0] Condition always true [./~/moment/locale/be.js:8,0] Condition always true [./~/moment/locale/bg.js:6,0] Condition always true [./~/moment/locale/bn.js:6,0] Condition always true [./~/moment/locale/bo.js:6,0] Condition always true [./~/moment/locale/br.js:6,0] Condition always true [./~/moment/locale/bs.js:7,0] Condition always true [./~/moment/locale/ca.js:6,0] Condition always true [./~/moment/locale/cs.js:6,0] Dropping unreachable code [./~/moment/locale/cs.js:31,0] Dropping unreachable code [./~/moment/locale/cs.js:40,0] Dropping unreachable code [./~/moment/locale/cs.js:49,0] Dropping unreachable code [./~/moment/locale/cs.js:58,0] Dropping unreachable code [./~/moment/locale/cs.js:67,0] Condition always true [./~/moment/locale/cv.js:6,0] Condition always true [./~/moment/locale/cy.js:6,0] Condition always true [./~/moment/locale/da.js:6,0] Condition always true [./~/moment/locale/de-at.js:9,0] Condition always true [./~/moment/locale/de.js:8,0] Condition always true [./~/moment/locale/dv.js:6,0] Condition always true [./~/moment/locale/el.js:6,0] Condition always true [./~/moment/locale/en-au.js:5,0] Condition always true [./~/moment/locale/en-ca.js:6,0] Condition always true [./~/moment/locale/en-gb.js:6,0] Condition always true [./~/moment/locale/en-ie.js:6,0] Condition always true [./~/moment/locale/en-nz.js:5,0] Condition always true [./~/moment/locale/eo.js:8,0] Condition always true [./~/moment/locale/es.js:6,0] Condition always true [./~/moment/locale/et.js:7,0] Condition always true [./~/moment/locale/eu.js:6,0] Condition always true [./~/moment/locale/fa.js:6,0] Condition always true [./~/moment/locale/fi.js:6,0] Condition always true [./~/moment/locale/fo.js:6,0] Condition always true [./~/moment/locale/fr-ca.js:6,0] Condition always true [./~/moment/locale/fr-ch.js:6,0] Condition always true [./~/moment/locale/fr.js:6,0] Condition always true [./~/moment/locale/fy.js:6,0] Condition always true [./~/moment/locale/gd.js:6,0] Condition always true [./~/moment/locale/gl.js:6,0] Condition always true [./~/moment/locale/he.js:8,0] Condition always true [./~/moment/locale/hi.js:6,0] Condition always true [./~/moment/locale/hr.js:6,0] Condition always true [./~/moment/locale/hu.js:6,0] Dropping unused variable suffix [./~/moment/locale/hu.js:16,0] Condition always true [./~/moment/locale/hy-am.js:6,0] Condition always true [./~/moment/locale/id.js:7,0] Condition always true [./~/moment/locale/is.js:6,0] Condition always true [./~/moment/locale/it.js:7,0] Condition always true [./~/moment/locale/ja.js:6,0] Condition always true [./~/moment/locale/jv.js:7,0] Condition always true [./~/moment/locale/ka.js:6,0] Condition always true [./~/moment/locale/kk.js:6,0] Condition always true [./~/moment/locale/km.js:6,0] Condition always true [./~/moment/locale/ko.js:10,0] Condition always true [./~/moment/locale/ky.js:6,0] Condition always true [./~/moment/locale/lb.js:6,0] Condition always true [./~/moment/locale/lo.js:6,0] Condition always true [./~/moment/locale/lt.js:6,0] Condition always true [./~/moment/locale/lv.js:7,0] Condition always true [./~/moment/locale/me.js:6,0] Condition always true [./~/moment/locale/mk.js:6,0] Condition always true [./~/moment/locale/ml.js:6,0] Condition always true [./~/moment/locale/mr.js:7,0] Condition always true [./~/moment/locale/ms-my.js:6,0] Condition always true [./~/moment/locale/ms.js:6,0] Condition always true [./~/moment/locale/my.js:6,0] Condition always true [./~/moment/locale/nb.js:7,0] Condition always true [./~/moment/locale/ne.js:6,0] Condition always true [./~/moment/locale/nl.js:6,0] Condition always true [./~/moment/locale/nn.js:6,0] Condition always true [./~/moment/locale/pa-in.js:6,0] Condition always true [./~/moment/locale/pl.js:6,0] Condition always true [./~/moment/locale/pt-br.js:6,0] Condition always true [./~/moment/locale/pt.js:6,0] Condition always true [./~/moment/locale/ro.js:7,0] Condition always true [./~/moment/locale/ru.js:8,0] Condition always true [./~/moment/locale/se.js:6,0] Condition always true [./~/moment/locale/si.js:6,0] Condition always true [./~/moment/locale/sk.js:7,0] Dropping unreachable code [./~/moment/locale/sk.js:32,0] Dropping unreachable code [./~/moment/locale/sk.js:41,0] Dropping unreachable code [./~/moment/locale/sk.js:50,0] Dropping unreachable code [./~/moment/locale/sk.js:59,0] Dropping unreachable code [./~/moment/locale/sk.js:68,0] Condition always true [./~/moment/locale/sl.js:6,0] Condition always true [./~/moment/locale/sq.js:8,0] Condition always true [./~/moment/locale/sr-cyrl.js:6,0] Condition always true [./~/moment/locale/sr.js:6,0] Condition always true [./~/moment/locale/ss.js:6,0] Condition always true [./~/moment/locale/sv.js:6,0] Condition always true [./~/moment/locale/sw.js:6,0] Condition always true [./~/moment/locale/ta.js:6,0] Condition always true [./~/moment/locale/te.js:6,0] Condition always true [./~/moment/locale/th.js:6,0] Condition always true [./~/moment/locale/tl-ph.js:6,0] Condition always true [./~/moment/locale/tlh.js:6,0] Condition always true [./~/moment/locale/tr.js:7,0] Condition always true [./~/moment/locale/tzl.js:6,0] Condition always true [./~/moment/locale/tzm-latn.js:6,0] Condition always true [./~/moment/locale/tzm.js:6,0] Condition always true [./~/moment/locale/uk.js:7,0] Condition always true [./~/moment/locale/uz.js:6,0] Condition always true [./~/moment/locale/vi.js:6,0] Condition always true [./~/moment/locale/x-pseudo.js:6,0] Condition always true [./~/moment/locale/zh-cn.js:7,0] Condition always true [./~/moment/locale/zh-tw.js:6,0]
重用通用模块
Moment并不是突出webpack最强大功能的最佳模块-重用公共模块（因为moment不使用依赖项）。
让我们不要考虑您的应用程序使用3个模块，并且每个模块都有一些依赖关系。

size module1 20 kB dependencies - moduleA 10 kB - moduleB 15 kB - moduleC 5 kB module1.min 50 kB module2 10 kB dependencies - moduleA 10 kB - moduleD 5 kB module2.min 25 kB module3 30 kB dependencies - moduleA 10 kB - moduleC 5 kB module3.min 45 kB
如果您只使用这3个模块的.min版本，您将向应用程序中添加50 kB+25 kB+45 kB=120 kB。

size module1 20 kB dependencies - moduleA 10 kB - moduleB 15 kB - moduleC 5 kB module1.min 50 kB <-- this module2 10 kB dependencies - moduleA 10 kB - moduleD 5 kB module2.min 25 kB <-- this module3 30 kB dependencies - moduleA 10 kB - moduleC 5 kB module3.min 45 kB <-- this
另一方面，如果使用源文件进行构建，则只会添加一次通用模块。与以往不同，moduleA被纳入3次，moduleC被纳入2次。此时间将添加到您的应用程序中：

size module1 20 kB <-- this dependencies - moduleA 10 kB <-- this - moduleB 15 kB <-- this - moduleC 5 kB <-- this module1.min 50 kB module2 10 kB <-- this dependencies - moduleA 10 kB - moduleD 5 kB <-- this module2.min 25 kB module3 30 kB <-- this dependencies - moduleA 10 kB - moduleC 5 kB module3.min 45 kB
最后，使用这种方法，您可以将95 kB添加到您的应用程序中。

为什么不缩小整个网络包bundle.js？（来源）

webpack-p用于构建一次生产（缩小）

可能比试图找到一些方法来使用单个包的缩小版本更容易。