Как уменьшить размер файла bundle.js с помощью веб-пакета - PullRequest
Новая
       36

Как уменьшить размер файла bundle.js с помощью веб-пакета

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

Я использую webpack для создания своего реагирующего приложения, оно создает размер bundle.js размером 4 МБ, очень большой, как уменьшить этот размер, вот мой webpack.config.js, какие еще плагины мне следует использовать

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

var compressionPlugin = require('compression-webpack-plugin');
var copyWebpackPlugin = require('copy-webpack-plugin');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// Setup config.
module.exports = {
  devServer: {
    port: API === 'local' ? 8081 : 8080
  },
  devtool: DEBUG ? 'inline-source-map' : false,
  entry: [
    'whatwg-fetch',
    path.join(__dirname, PATH)
  ],
  module: {
    loaders: [
      {
        exclude: /(bower_components|node_modules)/,
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-class-properties',
            'transform-object-rest-spread',
            'transform-runtime'
          ],
          presets: ['latest', 'react']
        },
        test: /\.jsx?$/
      },
      {
        test: /\.scss?$/,
        use: CssPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        loader: 'worker-loader',
        options: {
          name: '[name].js',
          inline: true
        },
        test: /\.worker\.js$/
      }
    ]
  },
  output: {
    filename: '[name].bundle.[chunkhash].js',
    path: path.join(__dirname, './dist'),
    chunkFilename: "[name].[chunkhash].js",
    publicPath: '/'
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

1 Ответ

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

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

Наконец, вы можете попробовать какой-нибудь плагин веб-пакета, чтобы уменьшить ваш пакет, такой как :ression-webpack-plugin, dedupe-plugin, uglifyjs-plugin, ignore-plugin

...