bundle.js слишком большой в проекте webpack

Я пытаюсь создать проект action + babel + webpack. Это работает, но файл bundle.js имеет размер 950 КБ.bundle.js слишком большой в проекте webpack

is bundle.js всегда такой большой? если нет, как уменьшить размер?

это мой webpack.config.js:

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
entry: APP_DIR + '/index.jsx', 
output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
}, 
plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false 
     } 
    }) 
], 
module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     loader : 'babel', 
     query: 
     { 
      presets: ["es2015", 'react'] 
     } 
     } 
    ] 
} 
}; 

module.exports = config;

источник

2016-12-28 Nir Kogman

Да. пакет будет расти на основе ваших зависимостей. webpack упаковывает все ваши зависимости, в которые вы включаете, используя импорт. альтернативным способом вы можете использовать CDN, насколько это возможно, для ваших зависимостей во время развертывания и конвертировать ES6 в ES5 с помощью babel для ваших реагирующих компонентов. – subash

Это всегда зависит от того, что вы тоже с этим связаны. Вы также можете попробовать разделить пакет между librairies поставщика и кодом приложения. Таким образом, клиент может кэшировать поставщика и не загружать его на некоторое время. У вас также есть подход к dll Webpack, который впоследствии разбивает и ускоряет компиляцию (если вы используете такой инструмент, как hmr) – gretro

В значительной степени зависит от ваших зависимостей. Вы можете игнорировать ie8 и дедуктировать свои зависимости для бритья некоторых kBs:

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     screw_ie8: true, 
     warnings: false 
     }, 
     mangle: { 
     screw_ie8: true 
     }, 
     output: { 
     comments: false, 
     screw_ie8: true 
     } 
    }) 
    ] 
};

источник

2016-12-28 16:49:42 Tholle

-1

вы всегда можете попробовать использовать JavaScript "Минимизировать" инструмент. Он сжимает оптимизацию вашего кода. Поиск в google для javascript minify.

источник

2016-12-28 15:54:24

Существует, как правило, много зависимостей, поэтому этот размер не является чем-то необычным. Попробуйте использовать следующие флаги при создании вашего сверток:

--optimize-minimize - Minifies расслоение

--optimize-occurrence-order - Оптимизирует порций Идентификаторы

--optimize-dedupe - дедуплицирует же куски кода

Еще по теме here.

источник

2016-12-28 16:00:26

bundle.js слишком большой в проекте webpack

ответ

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