Question

我想在我的项目中使用名为typescript-collections的npm模块。但我只想使用该模块中名为LinkedList的单个类。问题是，当我使用webpack编译我的项目时，它会导入模块中的所有16个类。这对我来说似乎是不必要的臃肿。

我尝试过使用：

import {LinkedList} from "typescript-collections"

但Webpack坚持捆绑所有其他类：

Hash: 5c6a6a87ac1d30bb1baa
Version: webpack 3.8.1
Time: 1500ms
Asset                          Size      Chunks         Chunk Names
bundle.js                      120 kB     0  [emitted]  main
[8] ./src/main.ts              4.34 kB   {0} [built]
[9] ./src/GameObjectManager.ts 876 bytes {0} [built]
    + 16 hidden modules

我很确定LinkedList.ts并不依赖于所有16个类，因为我已经将Index.ts中除LinkedList.ts之外的所有导出注释为随机测试：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Copyright 2013 Basarat Ali Syed. All Rights Reserved.
//
// Licensed under MIT open source license http://opensource.org/licenses/MIT
//
// Orginal javascript code was by Mauricio Santos
/*
var _arrays = require("./arrays");
exports.arrays = _arrays;
var Bag_1 = require("./Bag");
exports.Bag = Bag_1.default;
var BSTree_1 = require("./BSTree");
exports.BSTree = BSTree_1.default;
var Dictionary_1 = require("./Dictionary");
exports.Dictionary = Dictionary_1.default;
var Heap_1 = require("./Heap");
exports.Heap = Heap_1.default;
var LinkedDictionary_1 = require("./LinkedDictionary");
exports.LinkedDictionary = LinkedDictionary_1.default;*/
var LinkedList_1 = require("./LinkedList");
exports.LinkedList = LinkedList_1.default;
/*var MultiDictionary_1 = require("./MultiDictionary");
exports.MultiDictionary = MultiDictionary_1.default;
var FactoryDictionary_1 = require("./FactoryDictionary");
exports.FactoryDictionary = FactoryDictionary_1.default;
var FactoryDictionary_2 = require("./FactoryDictionary");
exports.DefaultDictionary = FactoryDictionary_2.default;
var Queue_1 = require("./Queue");
exports.Queue = Queue_1.default;
var PriorityQueue_1 = require("./PriorityQueue");
exports.PriorityQueue = PriorityQueue_1.default;
var Set_1 = require("./Set");
exports.Set = Set_1.default;
var Stack_1 = require("./Stack");
exports.Stack = Stack_1.default;
var MultiRootTree_1 = require("./MultiRootTree");
exports.MultiRootTree = MultiRootTree_1.default;
var _util = require("./util");
exports.util = _util;
//# sourceMappingURL=index.js.map

当我使用修改后的Index.ts文件编译项目时，Webpack不包含所有类，程序仍然可以正常工作。

    Hash: 34703e4a9ff9a5f140d8
    Version: webpack 3.8.1
    Time: 1505ms
    Asset                         Size        Chunks             Chunk Names
bundle.js                         32 kB       0  [emitted]  main
   [1] ./src/main.ts              4.34 kB    {0} [built]
   [2] ./src/GameObjectManager.ts 876 bytes  {0} [built]
    + 4 hidden modules

所以我要问的是，如果有合适的方法导入模块的子集而不采用hacky方法。此外，我正在进入前端开发，所以我忽略了一些非常明显的机会。提前谢谢。

编辑1：这是我的webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

编辑2：我尝试使用以下标志

webpack --optimize-minimize

据我所知，其中也应该做＃tree; shake＆＃34;，但是通过搜索bundle.js，我仍然找到了不需要的类的定义。

编辑3：这是我的tsconfig.json

{
"exclude": ["node_modules/",
            "dist"],
"compilerOptions": 
{
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist/"
}
}

和我的家属

  "devDependencies": {
"ts-loader": "^3.1.1",
"typescript": "^2.6.1",
"typescript-collections": "^1.2.5",
"uglifyjs-webpack-plugin": "^1.1.1",
"webpack": "^3.8.1"
 },

Answer 1

使用UglifyJSPlugin minifier删除dead code。

https://webpack.js.org/guides/tree-shaking/

如何使用Webpack在JS / TS中仅导入npm模块的一小部分？

1 个答案: