Webpack оптимизация фронта проблемы?

Question

[IDONTSUDO]

Плагины при запуске мода opt.

optimization: {
          minimize: true,
          minimizer: [new TerserPlugin()],
      },
   plugins: [
      new HtmlWebpackPlugin({
          template: './public/index.html'
      }),
      new MiniCssExtractPlugin({
          filename: '[name].css',
          chunkFilename: '[id].css'
      }),
      new WebpackBar(),
      new ImageminPlugin({
          pngquant: {
              quality: '95-100'
          }
      }),
      new OptimizeCSSAssetsPlugin({})

Hash: 894d1fadd4f9196e3b1b
Version: webpack 4.43.0
Time: 63755ms
Built at: 2020-06-07 18:12:03
               Asset       Size  Chunks                    Chunk Names
           front.css     10 MiB       0  [emitted]  [big]  front
            front.js   7.71 MiB       0  [emitted]  [big]  front
front.js.LICENSE.txt   1.44 KiB          [emitted]
          index.html  406 bytes          [emitted]
Entrypoint front [big] = front.css front.js

Вывод консоли. После запуска вебпака в режиме оптимизаций. Что я делаю не так? В проекте кроме react 1.5 зависимости. Ну и картинок на 15 мб.

Comments

[Mikhail Osher]

Полностью уже конфиг показывайте, так трудно сказать.
Может у Вас там картинки по 2мб инлайнятся в CSS через base64, откуда мы знаем))

[Yustas Alexu]

там же написано
front.css 10 MiB
front.js 7.71 MiB
У вас очень тяжелый файл стилей. Что у вас там? Картинки в base64?

[IDONTSUDO]

Mikhail Osher, он 300 строк:D Я посмотрел в самом bund`ле подгружаются картники. И они походу проблема в них. Весь код конфига ниже.

if (DevMode === "optimizations") {
     return {
         entry: {
             front: './src/index.tsx',
         },
         resolve: {
             extensions: ['.ts', '.tsx', '.js']
         },
         output: {
             path: __dirname + '/build',
             filename: '[name].js'
         },
         module: {
             rules: [{
                     test: /\.tsx?$/,
                     loader: 'awesome-typescript-loader'
                 },
                 {
                     test: /\.css$/,
                     use: ['style-loader', 'css-loader']
                 },
                 { test: /\.(jpe?g|png|gif|svg|webp)$/i, loader: 'url-loader?name=app/images/[name].[ext]' },
                 {
                     test: /\.styl$/,
                     use: [{
                             loader: MiniCssExtractPlugin.loader,
                             options: { publicPath: '/dist' }
                         },
                         { loader: 'css-loader' },
                         { loader: 'stylus-loader' }
                     ]
                 }
             ]
         },
         optimization: {
             minimize: true,
             minimizer: [new TerserPlugin()],
         },
         plugins: [
             new HtmlWebpackPlugin({
                 template: './public/index.html'
             }),
             new MiniCssExtractPlugin({
                 filename: '[name].css',
                 chunkFilename: '[id].css'
             }),
             new WebpackBar(),
             new ImageminPlugin({
                 pngquant: {
                     quality: '95-100'
                 }
             }),
             new OptimizeCSSAssetsPlugin({})
         ]
     }
 }

Answer 1

[Mikhail Osher]

https://webpack.js.org/loaders/url-loader/
url-loader в одиночку лучше не использовать, ибо он в base64 инлайнит всё.
Установите дополнительно file-loader, добавьте в опции url-loader параметр limit: 10000, чтобы ассеты выше 10кб выносились физическими файлами.

Comments

[IDONTSUDO]

{
        test: /\.(jpeg|png|gif|svg|webp|jpg)$/i,
        use: [{
            loader: 'url-loader',
            limit: 10000
        }],
    },

Странно с таким кодом он не грузит jpg и svg. А тоже просто их в base64 конвертит. Не знайте в чем может быть проблема?

[Mikhail Osher]

IDONTSUDO, можете показать пример использования?

[IDONTSUDO]

Mikhail Osher, проблема была в том что я использовал awesome-ts-loader. А он деприкатейд. И за него не так грузились форматы файлов.