2

У меня проект с двумя страницами, десяток компонентов и контэйнеров.

При сборке проекта bundle.js весит 6 МБ. Я считаю, что это много. Потому что на мобильном страница достаточно долго грузится.

Результаты прикрепил к теме BundleAnalyzerPlugin.введите сюда описание изображения

Мой webpack.config.js:

const path = require('path');
const webpack = require('webpack');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    debug: true,
    devtool: 'inline-source-map',
    noInfo: false,
    entry: [
        'eventsource-polyfill',
        'webpack-hot-middleware/client?reload=true',
        path.resolve(__dirname, 'src/index')
    ],
    target: 'web',
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'src')
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerHost: 'localhost',
            analyzerPort: 8888,
            reportFilename: 'report.html',
            defaultSizes: 'parsed',
            openAnalyzer: true,
            generateStatsFile: false,
            statsFilename: 'stats.json',
            statsOptions: null,
            logLevel: 'info'
        })
        ],
    module: {
        loaders: [
            {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
            {test: /(\.css)$/, loaders: ['style', 'css']},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
            {test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
            {test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window'},
            {test: /\.(png|jpg|gif)$/, loader: 'file-loader'}
        ]
    }
};

Как уменьшить размер bundle.js (или ускорить загрузку страницы на мобильном)?

1

1 ответ 1

4

При использовании Webpack есть несколько простых способов значительного уменьшения размера сборки (и применять их, разумеется, можно в совокупности).

Флаг -p Добавление этого флага при выполнении сборки, выполнит его в production режиме, произведя манипуляции, ведущие к уменьшению размера сборки.

webpack --config webpack.config.js -p

Uglify Plugin В webpack есть встроенный плагин, в комплекте методов optimize, который производит множество интересных манипуляций с бандлом и кроме, собственно, аглификации и минификации умеет убирать consloe.log, комментарии и т.п. Пример для конфигурации:

  plugins: [
  new webpack.optimize.UglifyJsPlugin({
  beautify: false,
  mangle: {
    screw_ie8: true,
    keep_fnames: true
  },
  compress: {
    screw_ie8: true,
    drop_console: true
  },
  comments: false,
})]

Описание (кроме процесса инсталляции, подходит для webpack.optimize.UglifyJsPlugin): https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#src/components/Sidebar/Sidebar.jsx

Уже данных манипуляций хватает, чтобы сжать стандартный стартовый 6 мегабайтный размер средненькой заготовки килобайт до 700.

Для последующей оптимизации неплохо себя зарекомендовал

https://github.com/webpack-contrib/webpack-bundle-analyzer

В графическом виде показывает кто и сколько отъедает у бандла. Пример конигурации для webpack:

    const BundleAnalyzerPlugin = require('webpack-bundle-
    analyzer').BundleAnalyzerPlugin;

plugins: [
   new BundleAnalyzerPlugin({
  analyzerMode: 'server',
  analyzerHost: 'localhost',
  analyzerPort: 8888,
  reportFilename: 'report.html',
  defaultSizes: 'parsed',
  openAnalyzer: true,
  generateStatsFile: false,
  statsFilename: 'stats.json',
  statsOptions: null,
  logLevel: 'info'
})]
11
  • У меня стоит флаг NODE_ENV=production, если добавить -p, то из 6 МБ bundle выростает до 8,6 МБ. А если оставить только -p , то вообще до 9МБ )))))) Что-то не то)
    – ks_on_v
    3 окт 2017 в 11:56
  • Если использовать new webpack.optimize.UglifyJsPlugin то тоже вырастает до 8.6 МБ
    – ks_on_v
    3 окт 2017 в 12:01
  • А можно конфиг вебпака?
    – bonusrk
    3 окт 2017 в 12:20
  • Добавил в описание темы
    – ks_on_v
    3 окт 2017 в 12:28
  • Судя по отсутствию rules это первый webpack?
    – bonusrk
    3 окт 2017 в 13:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.