Понять выход Webpack

Question

Я пытаюсь оптимизировать время сборки 6s в режиме просмотра с использованием 1200 модулей (95% поставщика). Я пытаюсь понять, что происходит, поэтому я могу сделать это быстрее.

Вещи, которые я не понимаю:

• ли [излучаемый] означает данный кусок был построен?
• Как я могу проверить, что данный фрагмент перестроен или нет?
• Как я могу увидеть chunkHash? (Я хочу убедиться, что webpack видит то же самое, что и я с md5)
• Какие оптимизации я могу найти?

Факты:

• Расслоение поставщика не записываются на диск в режиме часов, если изменения коды приложения, я проверили с измененной датой и удалением. Файл не был создан при срабатывании перестройки. Кроме того, хеш-код md5 не изменяется для кода поставщика.
  • Большая часть времени, затрачиваемого на строительство модулей, счетчик модулей работает от 0-> 1200.

WebPack конфигурации заключается в следующем:

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var WatchIgnorePlugin = require('watch-ignore-webpack-plugin') 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var path = require('path'); 
var webpack = require('webpack'); 

function isExternal(module) { 
    var userRequest = module.userRequest; 

    if (typeof userRequest !== 'string') { 
      return false; 
     } 

    return userRequest.indexOf('bower_components') >= 0 || 
      userRequest.indexOf('node_modules') >= 0 || 
      userRequest.indexOf('libraries') >= 0; 
} 

module.exports = { 
    context: __dirname + "/src", 
    cache: true, 
    cacheDirectory: '.cache', 
    entry: { 
     index: ["babel-polyfill", "./index"], 
     login: "./login" 
    }, 
    resolve: { 
    alias: { 
     config: path.join(__dirname, 'src/config', `${process.env.NODE_ENV || 'development'}`) 
    }, 
    modulesDirectories: [ 
     'node_modules', 
    ], 
    unsafeCache: true, 
    extensions: ["", ".js", ".jsx"] 
    }, 
    devtool: 'eval', 
    module: { 
    loaders: [{ 
     test: /\.scss$/, 
     include: /src/, 
     exclude: /node_modules/, 
     loader: ExtractTextPlugin.extract('css!sass') 
    }, { 
     test: /\.css$/, 
     exclude: /node_modules/, 
     include: /src/, 
     loaders: ['style', 'css?sourceMap'], 
    }, 
    { 
     test: /\.jsx?$/, 
     include: /src/, 
     exclude: /node_modules/, 
     loader: "babel-loader", 
     query: { 
     "cacheDirectory": ".cache", 
     "presets": ["es2015", "stage-0", "react"], 
     "plugins": ["transform-class-properties", "transform-object-rest-spread"] 
     } 
    }], 
    noParse: [ 
     /underscore\/underscore\.js$/, 
     /react-with-addons\.js$/, 
    ] 
    }, 
    output: { 
    filename: "[name].bundle.js", 
    path: __dirname + "/dist", 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: function(module) { 
     return isExternal(module); 
     }, 
    }), 
    new WatchIgnorePlugin([ 
     path.resolve(__dirname, './node_modules/'), 
     path.resolve(__dirname, './.git/') 
    ]), 
    new CopyWebpackPlugin([ 
     { from: 'static', to: 'static' } 
    ]), 
    new CopyWebpackPlugin([ 
     { from: 'login.html', to: 'login.html' } 
    ]), 
    new CopyWebpackPlugin([ 
     { from: 'index.html', to: 'index.html' } 
    ]), 
    new ExtractTextPlugin('[name].css', { 
     allChunks: true 
    }) 
    ], 
    watchOptions: { 
    poll: 300, 
    ignore: /node_modules/, 
    }, 
    externals: {} 
} 

Выход в режим часов:

[mip] (+master)> node node_modules/webpack/bin/webpack.js --watch --progress --display-chunks --display-cached --display-reasons -v 
Hash: fadbfa42fdd7810886d6 
Version: webpack 1.13.3 
Time: 6346ms 
       Asset  Size Chunks    Chunk Names 
     index.bundle.js  582 kB  0 [emitted] index 
     login.bundle.js 8.88 kB  1 [emitted] login 
     vendor.bundle.js  4.9 MB  2 [emitted] vendor 
      index.css 87.2 kB  0 [emitted] index 
      login.css 44.4 kB  1 [emitted] login 
    static/img/logo.png 4.28 kB   [emitted] 
static/img/favicon.ico  270 kB   [emitted] 
      login.html 573 bytes   [emitted] 
      index.html 574 bytes   [emitted] 
chunk {0} index.bundle.js, index.css (index) 519 kB {2} [rendered] 
    [0] multi index 40 bytes {0} [built] 
    + 100 hidden modules 
chunk {1} login.bundle.js, login.css (login) 7.33 kB {2} [rendered] 
    + 5 hidden modules 
chunk {2} vendor.bundle.js (vendor) 4.41 MB [rendered] 
    + 1191 hidden modules 

Answer 1

Если вы хотите, чтобы ускорить начальное развитие строит, то вы» re хочет уменьшить время, затрачиваемое Webpack на анализ блоков, уменьшение количества HTTP-запросов, введение HMR для инкрементных изменений.

Вы можете начать съемку с CommonsChunkPlugin и ExtractTextPlugin. Если вы хотите взять модули поставщика из уравнения, вы можете создать их как библиотеку, используя DllPlugin в одной компиляции, а затем продолжить повторное использование их с помощью DllReferencePlugin для вашей основной компиляции пакетов до тех пор, пока источники поставщиков не изменятся. Вы можете узнать больше об этом в optimization documentation, но вот отличный article by Rob Knight, где он предоставляет более подробную информацию.

И, наконец, нет необходимости спрашивать, действительно ли Webpack делает недействительными куски при настройке загрузчиков. Они хорошо оснащены для отслеживания зависимостей, которые покоятся на диске и будут разумно отменять что-либо вперед. Я могу порекомендовать webpack-bundle-analyzer для анализа ваших выходов.