我在我的环境中进行了设置,在该环境中,我用TypeScript编写了客户端JS代码(以获得使用TS的好处),并使用Webpack将其捆绑到Firebase项目中的公共目录中。 我发现Webpack似乎在我的代码中增加了很多开销。 当原始文件<100KiB时,仅打包导入Firestore模块的文件最终将得到大约300 KiB的代码。

这是仍然具有相同行为的最小配置:

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\" && 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"
  }
}

如上所述,当导入的文件小于100 KiB时,最终的捆绑包大小为300+ KiB。 我该怎么做才能使我的捆绑包不超过三倍?

#1楼 票数:0 已采纳

我在我的环境中进行了设置,在该环境中,我用TypeScript编写了客户端JS代码(以获得使用TS的好处),并使用Webpack将其捆绑到Firebase项目中的公共目录中。 我发现Webpack似乎在我的代码中增加了很多开销。 当原始文件<100KiB时,仅打包导入Firestore模块的文件最终将得到大约300 KiB的代码。

这是仍然具有相同行为的最小配置:

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\" && 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"
  }
}

如上所述,当导入的文件小于100 KiB时,最终的捆绑包大小为300+ KiB。 我该怎么做才能使我的捆绑包不超过三倍?

  ask by user3670473 translate from so

未解决问题?本站智能推荐:

1回复

Webpack导出模块未定义

我想使用webpack为我的应用程序编译bundle.js。 我通过将导入和导出添加到我的* .ts文件中来创建依赖关系树。 尝试运行应用程序时出现一个问题。 我有一个main.ts文件: 这是我的moduleX文件: 在运行build dev并尝试运行我的应用程序后,
1回复

与 webpack 捆绑后 Nestjs 应用程序无法运行

我有一个 nestjs 应用程序,我使用 webpack 将整个项目捆绑到一个 main.js 文件中。 我的 webpack 配置文件只是通过这个 repo流动,但是当我运行npm run build:prod将 main.js 捆绑到 dist/main.js 并运行node main.js它有
1回复

webpack和打字稿:以es5为目标的部分lodash导入不起作用

我试图部分导入lodash以在webpack / typescript / react环境中工作以减小包的大小。 我正在使用lodash@4.17.4和webpack@2.4.1 我知道我不应该这样导入lodash,因为它会导入整个lodash库: 所以我尝试了这个: 但
1回复

如何使用 webpack 和 Babel 将 TypeScript/Less 文件编译成 JavaScript/CSS?

目前,我正在开发一个包并准备在 npm 中发布它,我用 TypeScript 编写了它,但在包捆绑方面遇到了一些问题。 我将我的代码(TypeScript/Less 文件)放在src ,结构如下所示: 由于我想在npm中发布它,所以我需要将它编译成JavaScript/CSS文件(在lib文件
1回复

将Firebase与Webpack和TypeScript一起使用

我正在尝试从Firebase实例中提取一些数据,但是在尝试将其绑定到变量时遇到问题。 我正在使用TypeScript和Webpack进行构建。 main.ts 打字和npm模块已安装并运行,Visual Code不会出现任何错误,但是当我点击浏览器时,我得到了: 错误
2回复

如何使用Webpack构建/编译Firebase云功能

我正在使用webpack构建我的云功能(出于多种原因,例如路径别名,打字稿和其他一些配置) 我有index.ts文件以及src文件夹,其中包含每个函数的单独文件。 我的index.ts文件然后像这样导出它们 与tsc东西相比,webpack的问题在于它需要来自所需文件的所有代码并将其捆绑在索
1回复

如何在整个 Typescript 项目中使用动态导入和 webpack 块的类型?

我正在尝试在 Typescript 项目中延迟加载 firebase 并希望让 webpack 将 firebase 放到一个单独的块中。 代码是: 在这个模块中,我想在其他模块中使用延迟加载的 Firebase。 不幸的是,firebase 目前没有被放到一个单独的 webpack 块中。 在
1回复

如何使用gulp和webpack减少webpack包的大小

我的webpack js包是300kb,我自己的代码非常少。 我该如何减少这个? 我试过取出几个导入(虽然我没有使用很多库 我的代码可以在这里找到。 https://github.com/gpitot/gulp-template 我的Babelrc文件: https : /