Как снизить размер webpack файла?

86
29 мая 2021, 04:10

Всем привет. Есть проект, использующий webpack. При сборке приложения, файл main.js имеет размер 8.94 Мб. Установил утилиту webpack-bunlde-analyzer. Данная утитита выдает размер 2.99 Мб. Размер папки ClientApp 421 Кб.

Пробовал вариант Code splitting, но мне нужно без этого. Пытался так:

`resolve: { 
    modules: ['app', 'node_modules'],
    extensions: [ '.js', ],
    mainFields: [ 'browser', ],
    alias: { 'lodash-es': 'lodash' }
}`

Выдает ошибку Uncaught Error: Cannot find module "event-source-polyfill".

В чем может быть проблема? Могу ли как-нибудь снизить размер webpack?

package.json

{
  "name": "ImgApp",
  "private": true,
  "version": "0.0.0",
  "devDependencies": {
    "@types/webpack-env": "^1.13.5",
    "aspnet-webpack": "^2.0.3",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "compression-webpack-plugin": "3.0.0",
    "bootstrap-vue": "2.0.0-rc.9",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.1.2",
    "isomorphic-fetch": "^2.2.1",
    "aos": "2.3.4",
    "bootstrap": "4.3.1",
    "font-awesome": "4.7.0",
    "jquery": "^3.3.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.7.0",
    "webpack-hot-middleware": "^2.21.0",
    "vuelidate": "0.7.4",
    "vue-cropperjs": "4.0.0",
    "vue-cookie": "1.1.4",
    "masonry": "0.0.2",
    "masonry-layout": "4.2.2",
    "vue-masonry": "0.11.7",
    "vue-progressive-image": "3.2.0",
    "vue-masonry-css": "1.0.3",
    "@aspnet/signalr": "1.1.4",
    "axios-progress-bar": "1.2.0"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "vue": "^2.5.13",
    "vuex": "3.1.0",
    "vue-loader": "^14.0.3",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.13",
    "vue-image-upload": "1.0.1",
    "vue2-editor": "2.6.6",
    "axios": "0.18.0",
    "webpack-bundle-analyzer": "3.4.1",
    "lodash": "4.17.15"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
var CompressionPlugin = require('compression-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    context: __dirname,
    entry: { main: './App/index.js' },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            'lodash': 'lodash/core'
        },
        extensions: ['*', '.js', '.vue', '.json'],
        modules: ['app', 'node_modules']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    output: {
        path: path.join(__dirname, bundleOutputDir),
        filename: '[name].js',
        publicPath: 'dist/'
    },
    devtool: '#eval-source-map',
    plugins: [new BundleAnalyzerPlugin()]
}
if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.optimize.UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: false,
            extractComments: 'all',
            uglifyOptions: {
                compress: true,
                output: null
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        new CompressionPlugin()
    ])
}
READ ALSO
Как эти две строки написать на чистом javascript?

Как эти две строки написать на чистом javascript?

хочу переделать jQuery строкb на JS

138
Как объединить css файлы? Не надо сжимать, а именно все файлы объединить

Как объединить css файлы? Не надо сжимать, а именно все файлы объединить

Проблема в том что есть n кол-во файлов cssНужно их объединить, что бы все классы были в одном файле

97