树摇ng-bootstrap 4.0.1不起作用

Question

希望有人可以告诉我我做错了。

我在带有Webpack 4的Angular 7项目中使用@ng-bootstrap/ng-bootstrap^4.0.1，但无法在生产包中摇晃ng-bootsrtap：

我仅在功能模块中使用3个模块：

app.module.ts 没有对@ng-bootstrap/ng-bootstrap的引用，也没有延迟加载模块。

feature.module.ts

import { NgbTooltipModule, NgbModalModule, NgbPopoverModule } from "@ng-bootstrap/ng-bootstrap";

@NgModule({
imports: [
    ...
    NgbTooltipModule.forRoot(), 
    NgbModalModule.forRoot(),
    NgbPopoverModule.forRoot()
],
...})

vendor.ts

...
import "@ng-bootstrap/ng-bootstrap";
...

webpack.common.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var helpers = require('./helpers');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
const ENV = process.env.NODE_ENV = process.env.ENV = 'development';


module.exports = {
  mode: process.env.NODE_ENV === "production" ? "production" : "development",
  entry: {
    'polyfills': './src/app/polyfills.ts',
    'vendor': './src/app/vendor.ts',
    'app': './src/app/bootstrap.ts',

  },

  resolve: {
    extensions: ['*', '.ts', '.js'],
    alias: {
      'lodash': 'lodash-es',
      'lodash.includes': 'lodash-es/includes',
      'lodash.isboolean': 'lodash-es/isboolean',
      'lodash.isinteger': 'lodash-es/isinteger',
      'lodash.isnumber': 'lodash-es/isnumber',
      'lodash.isplainobject': 'lodash-es/isplainobject',
      'lodash.isstring': 'lodash-es/isstring',
      'mobx': 'mobx/lib/mobx.module'
    }
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendor',
          test: /\/node_modules\//,
          chunks: 'all',
          priority: 0,
          enforce: true,
        },
      }
    },
  },

  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(json|png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|cur)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { minimize: true } }
          ]
        })
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loaders: ['css-to-string-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader']
      },
      {
        test: /\.sass$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader']
      }
    ]
  },




  plugins: [


    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeAttributeQuotes: true,
        collapseWhitespace: true,
        html5: true,
        minifyCSS: true,
        removeComments: true,
        removeEmptyAttributes: true,
      },
    }),


    new webpack.IgnorePlugin(
      //https://medium.com/@ahmedelgabri/analyzing-optimizing-your-webpack-bundle-8590818af4df
      //Used in the slug package ....To comment back if we ever get Arabic or Tibetan users
      /unicode\/category\/So/, /node_modules/
    ),

    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    }),

    new CopyWebpackPlugin([
      { from: 'public/images', to: 'assets/images' },
      { from: 'public/templates', to: 'assets/templates' }
    ]),
    new BundleAnalyzerPlugin({ defaultSizes: 'gzip' })
  ]
};

webpack.prod.js

var webpackMerge = require('webpack-merge');
var webpack = require('webpack');
var helpers = require('./helpers');
const TerserPlugin = require('terser-webpack-plugin');
const ngToolsWebpack = require('@ngtools/webpack');
var commonConfig = require('./webpack.common.js');


module.exports = webpackMerge(commonConfig, {
  mode: "production",

  devtool: 'source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  },

  module: {
    rules: [
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        loader: '@ngtools/webpack'
      }
    ]
  },

  optimization: {
    minimizer: [
      new TerserPlugin()
    ]
  },


  plugins: [
    new ngToolsWebpack.AngularCompilerPlugin({
      tsConfigPath: helpers.root('tsconfig-aot.json'),
      basePath: helpers.root(''),
      entryModule: helpers.root('src', 'app', 'app.module#AppModule'),
      mainPath: helpers.root('src', 'bootstrap.ts')
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      options: {
        htmlLoader: {
          minimize: false
        }
      }
    })
  ]
});

我尝试了Webpack2 Angular2 ng-bootstrap Tree Shaking和https://github.com/ng-bootstrap/ng-bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue+tree+shake+的解决方案，但仍然无法拆分该软件包。

我想念什么？