Блог

Главная - Вопросы по программированию - Webpack более чем в три раза увеличивает размер исходного модуля

Webpack более чем в три раза увеличивает размер исходного модуля

#typescript #firebase #webpack #bundle

#typescript #firebase #webpack #пакет

Вопрос:

У меня настроена среда, в которой я пишу JS-код на стороне клиента на TypeScript (чтобы получить преимущества использования TS) и использую Webpack для объединения его в мой общедоступный каталог в моем проекте Firebase. Я обнаружил, что Webpack, похоже, добавляет довольно много накладных расходов к моему коду. При упаковке файла, который просто импортирует только модуль Firestore, получается около 300 КБ кода, когда исходный файл составляет <100 КБ.

Вот минимальная конфигурация, которая по-прежнему ведет себя так же:

index.ts 

 import 'firebase/firestore';

webpack.config.ts 

 import { Configuration } from 'webpack';
import path from 'path';

const config: Configuration = {
    mode: 'production',
    entry: path.resolve(__dirname, 'index.ts'),
    module: {
        rules: [
            {
                test: /.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[chunkhash].js'
      },
    resolve: {
        extensions: [ '.ts', '.js' ],
        modules: ['node_modules'],
    },
    optimization: {
        minimize: true,
    },
}

export default config;

tsconfig.json 

 {
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "outDir": "lib",
        "sourceMap": false,
        "strict": true,
        "target": "es2017",
        "esModuleInterop": true,
    },
    "compileOnSave": true,
}

package.json 

 {
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "firebase": "^8.0.2"
  },
  "devDependencies": {
    "ts-loader": "^8.0.11",
    "ts-node": "^9.0.0",
    "typescript": "^4.0.5",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0"
  }
}

Как объяснялось выше, конечный размер пакета составляет более 300 КБ, когда импортируемый файл имеет размер <100 КБ. Что я могу сделать, чтобы размер моего пакета не увеличился в три раза?

Комментарии:

1. Вы должны удалить свой исходный пост. Это вызовет проблемы, если вы оставите его.

2. Вы считаете размер зависимостей?

3. @RobertHarvey, я удалил свой оригинальный пост. Что касается подсчета размера зависимостей, все, что я делаю, это запуск webpack для этого одного файла ввода, index.ts . И все, что делает этот файл, это импортирует модуль firestore. Webpack выводит main.js файл размером более 300 КБ. Исходный модуль firestore имеет размер менее 100 КБ. Я не понимаю, как Webpack более чем в три раза увеличивает размер исходного кода.

4. Webpack добавляет в сборку много собственных каркасов. Вы должны вручную удалить это, чтобы увидеть, что осталось. Но вам нужно будет оставить его, чтобы он мог выполнять свою работу при запуске приложения.

5. @DougStevenson если Webpack работает именно так, то я действительно не знаю, почему люди вообще используют его в этом контексте, потому что это просто сводит на нет прирост производительности небольшого исходного кода. Ранее я видел видео на YouTube, в котором инженер Google сказал, что они смогли получить пакет поставщиков размером менее 200 КБ для проекта, и я, честно говоря, не уверен, как они это сделали.

Ответ №1:

Хорошо, похоже, это известная проблема. Впервые это было упомянуто в этом выпуске в Firebase JS SDK GitHub (обсуждение перенесено сюда). Похоже, здесь есть довольно сложный обходной путь, или я мог бы просто использовать экспериментальную версию Firebase JS SDK.