2016-11-07 5 views
7

Я обновился до webpack 2 и до того, как дерево дрожало, размер моего пакета увеличился. При исследовании причин, по которым мне кажется, что у меня есть большие файлы, такие как bn.js и eliptic (некоторые зависимости от узла-libs-браузера - который сам по себе является зависимостью от webpack2). Есть ли способ удалить их или исключить их? В webpack1 они не добавлялись в мой пакет.Webpack2 node-libs-browser исключает?

+0

Такая же проблема сейчас; Вы когда-нибудь находили решение? Размер моего куска намного больше даже после дрожания дерева (примерно на 25% больше для моего куска поставщика). –

+0

Мы обнаружили, что файлы, которые были включены, были получены из полипайлов webpack (bn.js включены в качестве полифила для использования криптографического узла), и они просто кажутся больше, чем в webpack1 inlcuded (я думаю) – Carlo

+0

Ах, да, я знали, что это полиполки webpack, но я не понимаю, почему сейчас включены дополнительные. Webpack * должен * включать только полиполки, которые он обнаруживает по мере необходимости, и тянет много, которые не нужны вообще. Я использую NormalModuleReplacementPlugin, чтобы заполнить те, которые, как я знаю, мне не нужны с 'node-noop', который разрешает проблему с размером, но возможно, что я буду заглушать неправильные - я бы предпочел веб-пакет на самом деле только хватало того, что нужно, а не всей чертовой партии. –

ответ

4

Проблема в том, что WebPack по умолчанию применяет его внутренний плагин NodeSourcePluginhere или here for webworker, и если у вас есть модуль, который даже ссылается на модуль NodeJS как crypto, то есть: var Crypto = canUseDom ? null : require("crypto"), WebPack будет расслоение кучу больших файлов для имитации NodeJS , См. Вопрос, поданный здесь https://github.com/webpack/webpack/issues/4976.

Решение состоит в том, чтобы избежать любого кода, который ссылается на внутренние модули NodeJS, даже если они не используются в браузере.

Чтобы поймать их, вы можете удалить NodeSourcePlugin, переопределив опцию target.

const webpack = require("webpack"); 
const FunctionModulePlugin = require("webpack/lib/FunctionModulePlugin"); 

const output = { 
    path: process.cwd() + "/build", 
    filename: "bundle.[hash].js" 
}; 

{ 
    target:() => undefined, 
    output, 
    plugins: [ 
    new webpack.JsonpTemplatePlugin(output), 
    new FunctionModulePlugin(output), 
    new webpack.LoaderTargetPlugin("web"), 
    ] 
} 

Edit: с WebPack 3, теперь так же просто, как:

const webpackConfig = { 
    node: false 
} 

Если вы должны иметь код, который на стороне сервера, а ссылки NodeJS модули, то лучше, чтобы отделить тех, в их собственный модуль , и экспортировать фиктивную копию через поле browser в package.json.

Редактировать: Я написал блог, связанный с этим выпуском здесь https://medium.com/walmartlabs/webpack-optimization-a-case-study-92b130334b6c.

Смежные вопросы