webpack包超过2MB，而报告的模块大小为~700 k。

Question

我使用的是webpack的打字本，其配置如下：

webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/APIClient.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'reportserver.client.webpacked.js',
    path: path.resolve(__dirname, 'dist')
  }
};

tsconfig.json：

{
    "compilerOptions": {
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,        
        "sourceMap": true,
        "module": "commonjs",
        "target": "es6",
        "lib": ["dom", "es6"],
        "typeRoots": [ "./@types", "./node_modules/@types"]
    }
}

我在运行npx webpack -显示模块，并得到：

mylib.webpacked.js  2.46 MiB       0  [emitted]  [big]  main
Entrypoint main [big] = mylib.webpacked.js
 [0] ./node_modules/node-libs-browser/node_modules/timers-browserify/main.js 1.97 KiB {0} [built]
 [1] (webpack)/buildin/global.js 472 bytes {0} [built]
 [2] ./src/utils/ArrayHelpers.ts 3.61 KiB {0} [built]
 [3] ./src/ApexChartProvider.ts 4.97 KiB {0} [built]
 [4] ./node_modules/promise-polyfill/src/finally.js 499 bytes {0} [built]
 [5] ./src/APIClient.ts 5.54 KiB {0} [built]
 [6] ./src/utils/HttpCllient.ts 1000 bytes {0} [built]
 [7] ./node_modules/promise-polyfill/src/index.js 5.82 KiB {0} [built]
 [8] ./node_modules/setimmediate/setImmediate.js 6.32 KiB {0} [built]
 [9] ./node_modules/process/browser.js 5.29 KiB {0} [built]
[10] ./src/utils/HtmlHelpers.ts 780 bytes {0} [built]
[11] ./src/Report.ts 2.15 KiB {0} [built]
[12] ./node_modules/vue/dist/vue.common.js 157 bytes {0} [built]
[13] ./node_modules/vue/dist/vue.common.prod.js 91.3 KiB {0} [built]
[14] ./node_modules/http-vue-loader/src/httpVueLoader.js 10.6 KiB {0} [built]
[15] ./node_modules/apexcharts/dist/apexcharts.esm.js 442 KiB {0} [built]
[16] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[17] (webpack)/buildin/amd-options.js 80 bytes {0} [built]
[18] ./node_modules/vuejs-datepicker/dist/vuejs-datepicker.esm.js 73.2 KiB {0} [built]
[19] ./src/ReportModelCompiler.ts 8.88 KiB {0} [built]

报告的模块大小小于700 2MB，而包大小超过2MB。1.3MB从何而来？是webpack的开销还是一些默认的填充？

与browserify相同的构建大约是1MB，我一直在计算webpack会更好的走出盒子。

谢谢你的帮助

Answer 1

我认为这与内联的源地图有关。

使用webpack devtool选项(或none)的生产就绪值再次检查：https://webpack.js.org/configuration/devtool/

您也可以尝试mode: 'production'选项，但我不建议在开发过程中使用该选项