Блог

У меня есть небольшой проект React. bundle.js сгенерированный Webpack составляет 6,3 Мб. Как я могу уменьшить размер до <2,0 Мб? (2 МБ все еще большой, но приемлемый). Полный исходный код находится на github

webpack.config.js

 module.exports = {
    devtool: 'inline-source-map',
    entry: [
        './app/components/app.jsx'
    ],
    output: {
        path: './public',
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'app'],
        extensions: ['', '.js', '.jsx', '.scss']
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                exclude: /node_modules/,
                loaders: ['happypack/loader']
            },
            {
                test: /.scss$/,
                loaders: [
                    'style',
                    'css',
                    'autoprefixer?browsers=last 3 versions',
                    'sass?outputStyle=expanded'
                ]
            },
            {
                test: /.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'url?limit=8192',
                    'img'
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new HtmlWebpackPlugin({
            title: 'Fullstack Rebel',
            template: './app/templates/index_template.ejs'
        }),
        new HappyPack({
            loaders: ['babel?presets[]=react,presets[]=es2015']
        })
    ]
};
  

package.json

 {
  "name": "fullstackcms",
  "version": "0.0.1",
  "description": "A Content Management System Made of NodeJS, MongoDB, React, Redux and Bootstrap",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --colors"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/dsun29/fullstackcms"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer-loader": "^3.1.0",
    "body-parser": "^1.14.2",
    "connect-mongo": "^1.3.2",
    "css-loader": "^0.24.0",
    "express": "^4.13.3",
    "express-session": "^1.14.1",
    "file-loader": "^0.9.0",
    "history": "^1.17.0",
    "img-loader": "^1.2.2",
    "immutable": "^3.7.6",
    "jquery": "^3.1.0",
    "lodash": "^4.0.0",
    "mongodb": "^2.2.10",
    "node-sass": "^3.4.2",
    "node-twitter-api": "^1.8.0",
    "react": "^15.3.1",
    "react-bootstrap": "^0.30.3",
    "react-dom": "^15.3.1",
    "react-google-login": "^2.5.1",
    "react-modal-dialog": "^3.0.2",
    "react-redux": "^4.0.6",
    "react-router": "^2.7.0",
    "react-tinymce": "^0.5.1",
    "react-twitter-widgets": "^0.2.4",
    "redux": "^3.0.5",
    "redux-thunk": "^2.1.0",
    "reqwest": "^2.0.5",
    "routes": "^2.1.0",
    "sass-loader": "^4.0.1",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7"
  },
  "engines": {
    "node": "0.12.0"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.4.0",
    "babel-core": "^6.17.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.11.0",
    "babel-regenerator-runtime": "^6.5.0",
    "babel-register": "^6.16.3",
    "babel-runtime": "^6.11.6",
    "chai": "^3.4.1",
    "chai-immutable": "^1.5.3",
    "eslint": "^3.4.0",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.2.1",
    "eslint-plugin-react": "^6.2.0",
    "happypack": "^2.2.1",
    "html-webpack-plugin": "^2.22.0",
    "mocha": "^3.0.2",
    "react-hot-loader": "^3.0.0-beta.3",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.0"
  }
}
  

Некоторые результаты webpack-bundle-size-analyzer

 active-event-stack: 402.98 KB (17.3%)
  lodash: 401.81 KB (99.7%)
  <self>: 1.17 KB (0.292%)
react-bootstrap: 382.86 KB (16.4%)
  warning: 1.76 KB (0.461%)
  <self>: 381.1 KB (99.5%)
react-router: 156.83 KB (6.73%)
  history: 49.02 KB (31.3%)
    warning: 1.76 KB (3.60%)
    <self>: 47.26 KB (96.4%)
  warning: 1.76 KB (1.13%)
  query-string: 1.45 KB (0.922%)
  hoist-non-react-statics: 1.35 KB (0.864%)
  <self>: 103.24 KB (65.8%)
immutable: 139.14 KB (5.98%)
react-overlays: 69.06 KB (2.97%)
  warning: 1.76 KB (2.56%)
  <self>: 67.29 KB (97.4%)
dynamics.js: 60.12 KB (2.58%)
react-tinymce: 49.09 KB (2.11%)
  lodash: 43.66 KB (88.9%)
  <self>: 5.43 KB (11.1%)
babel-runtime: 45.11 KB (1.94%)
  core-js: 40.78 KB (90.4%)
  <self>: 4.33 KB (9.59%)
jss: 42.23 KB (1.81%)
fbjs: 32.61 KB (1.40%)
react-modal-dialog: 26.36 KB (1.13%)
redux: 22.36 KB (0.960%)
react-redux: 19.37 KB (0.832%)
reqwest: 18.76 KB (0.806%)
dom-helpers: 15.56 KB (0.668%)
lodash: 12.9 KB (0.554%)
uncontrollable: 9.57 KB (0.411%)
style-loader: 6.99 KB (0.300%)
css-vendor: 6.11 KB (0.263%)
react-prop-types: 6.04 KB (0.260%)
react-center-component: 5.87 KB (0.252%)
react-jss: 5.34 KB (0.229%)
node-libs-browser: 5.17 KB (0.222%)
  process: 5.17 KB (100%)
  <self>: 0 B (0.00%)
react-google-login: 3.99 KB (0.171%)
deep-equal: 3.8 KB (0.163%)
keycode: 2.7 KB (0.116%)
object-assign: 1.95 KB (0.0836%)
invariant: 1.48 KB (0.0636%)
css-loader: 1.47 KB (0.0632%)
jss-vendor-prefixer: 1.39 KB (0.0596%)
jss-nested: 1.18 KB (0.0506%)
jss-camel-case: 1.13 KB (0.0484%)
hoist-non-react-statics: 1.09 KB (0.0470%)
classnames: 1.08 KB (0.0462%)
symbol-observable: 1.07 KB (0.0461%)
jss-px: 936 B (0.0393%)
redux-thunk: 529 B (0.0222%)
webpack: 251 B (0.0105%)
strict-uri-encode: 182 B (0.00763%)
react-dom: 63 B (0.00264%)
is-browser: 22 B (0.000923%)
reqwest xhr2: 15 B (0.000629%)
<self>: 119.37 KB (5.13%)
  

Есть пара вещей, которые вы можете сделать. Я предлагаю создать две конфигурации webpack. Во-первых, для разработки, где мы не заботимся о размере пакета, а во-вторых, для производства, где пакет будет оптимизирован.

1. Полностью удалите исходную карту (удалите строку devtool). Вам это не нужно в рабочем режиме.

2. Используйте рабочий режим. Добавьте эту запись в плагины

    plugins: [
       new webpack.DefinePlugin({
           'process.env': {
               'NODE_ENV': JSON.stringify('production')
           }
       })
   ],
     

3. Использовать webpack -p для построения

4. Чтобы минимизировать размер библиотек, вы должны импортировать только те функции, которые вы используете. Например, если вам нужно несколько функций из Lodash, например forEach, orderBy, map .

    import forEach from 'lodash/forEach'
   import orderBy from 'lodash/orderBy'
   import map from 'lodash/map'
     

Ваш пакет огромен из-за исходной карты. При создании пакета удалите эту строку:

 devtool: 'inline-source-map'
  

Однако это также приведет к удалению исходной карты во время разработки, поэтому вы можете сделать что-то подобное в package.json:

«scripts»: { «dev»: «webpack-dev-server —colors», «build»: «webpack -p» },

Webpack -p запустит режим сборки для webpack, а также уменьшит ваш код, сделав его меньше.

И в вашем webpack.config.js:

 const args = require('yargs').argv;
const build = args.p;


devtool: build ? undefined : 'inline-source-map',
  

Это приведет к удалению исходной карты при сборке.

Существуют лучшие методы для определения сборки, такие как NODE_ENV , и вам следует посмотреть на параметры devtool, если вам нужна исходная карта в рабочей среде.

Вы используете ‘inline-source-map’ в качестве опции devtool. Это добавляет исходные карты внутри вашего пакета, которые на самом деле больше, чем сам код. Попробуйте другой вариант из документации webpack.

Это все еще может представлять интерес для некоторых людей, поэтому я добавлю дополнительный ответ…

Функциональные компоненты React, также известные как React hooks, представленные в версии 16, используют меньше кода, чем компоненты на основе классов, так что это еще один вариант

Старый вопрос, но он ставит под сомнение необходимость активного стека событий, который кажется довольно огромным для того, что он есть. Если это дочерняя зависимость, тогда подумайте о чем-то другом. Кроме того, используемая вами библиотека начальной загрузки огромна, вы можете просто использовать нужные вам конкретные компоненты и уменьшить производительность.

Комментарий, пришел к этому ответу, поскольку у меня есть приложение, использующее material-ui с несколькими компонентами и некоторыми взаимодействиями с маршрутизатором, а размер моего несжатого пакета составляет 873 КБ, включая стили и пару изображений. Вы также должны сжать его и использовать его в сжатом виде с помощью веб-сервера. Мой gzipped равен (180 КБ)… YMMV.