Размер пакета Webpack полностью отключен - PullRequest
Новая
       19

Размер пакета Webpack полностью отключен

0 голосов
/ 13 февраля 2020

У меня есть шанс поработать над проектом, в котором использовались Webpack 2 и Babel 6. Через несколько часов я успешно обновил нашу сборку до Webpack 4 и Babel 8. При этом у нас был поставщик двух файлов. js (228 КБ) и приложение. js (209 КБ), и теперь у нас есть один большой файл размером 2,3 МБ. Размер этих файлов в Chrome (в архиве).

На моем локальном компьютере последний файл размером 13,4 Мб с режимом разработки. 12,2 Мб с режимом производства. Если я добавлю библиотеку «момента» в проект со следующим кодом и рабочим режимом, он достигнет 13,9 Мбайт: 

import moment from 'moment';

Поскольку я нигде не использую момент, я ожидал, что Webpack не будет связывать Это; выглядит три встряхивания не работает / правильно настроен?

Пожалуйста, найдите ниже некоторую полезную информацию о моем проекте и дайте мне знать, что вы думаете.

.babelr c

{
  "presets": ["@babel/preset-react", ["@babel/preset-env", { "modules": false }]],
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }], "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from", "react-hot-loader/babel", "@babel/plugin-transform-react-constant-elements"]
}

.webpack.config. js

const config = {
  optimization: {
    usedExports: true,
  },
  entry: {
    app: './src/scripts/index.js',
  },
  output: {
    chunkFilename: '[id].[hash].js',
    path: path.join(__dirname, 'dist'),
    filename: 'content/dam/pom/js/app.js',
  },
  resolve: {
    alias: {
      bodymovin: path.join(__dirname, 'vendor/bodymovin.min.js'),
      modernizr$: path.resolve(__dirname, '.modernizrrc'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /(dist|prerender|node_modules|vendor)/,
      },
      {
        test: /\.(gif|png|jpg|woff|woff2|eot|svg|ttf|json)$/,
        use: 'file-loader',
        exclude: /(node_modules|vendor)/,
      },
    ],
  },
  plugins: plugins,
};

пакет. json

"scripts": {
    "dev": "npm run clean && npm run copy-assets && npm run copy-vendor-scripts && NODE_ENV=production webpack -p --progress",
    "copy-assets": "rsync -a --exclude='.*' ./src/404.html ./src/content ./src/favicon.ico ./dist",
    "copy-vendor-scripts": "rsync -a ./vendor ./dist",
  },

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

Проблема заключалась в HotModuleReplacementPlugin, который был включен в файл сборки и добавлял 10Mb. Когда я реорганизовал код, я пропустил тест, который включает этот плагин только в режиме DEV.

0 голосов
/ 24 февраля 2020

resol: { mainFields: ['browser', 'module', 'browserify', 'main'], alias ...}

Приоритет "module" перед "основной", чтобы встряхнуть правильно.

...