Webpack2 Angular2 ng-bootstrap 摇树

Question

我目前在我的 angular2 应用程序中使用 https://github.com/ng-bootstrap/ng-bootstrap 并使用 webpack2 构建所有 ts 文件。

我现在只使用 NgbModule 中的模态组件，但在缩小文件中我仍然可以看到 NbgAccordian 和我的应用程序中未使用的其他模块参考

@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.15

我试过 import { NgbModule, NgbModal, NgbModalOptions, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 但也没有按预期工作。这与 tree shaking 或 Ngbmodule 的编写方式有关吗？从 vendor.js 文件

中省略未使用模块的任何选项

vendor.ts

// Angular

import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/router';


// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

import  '@ng-bootstrap/ng-bootstrap';
import  'moment/moment';
import  'angular2-toaster/angular2-toaster';
import  'angular2-moment';
import  'ng2-tag-input';

import 'ng2-img-cropper';

webpack.prod.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var CompressionPlugin = require("compression-webpack-plugin");
var helpers = require('./helpers');

var packageJson = require('../../package.json');
var version = packageJson.version;
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
var drop_console = true;

//https://github.com/mishoo/UglifyJS2#mangle
//https://github.com/mishoo/UglifyJS2#compressor-options
https://github.com/mishoo/UglifyJS2
module.exports = webpackMerge(commonConfig, {
    devtool: "source-map",
    plugins: [
        new webpack.LoaderOptionsPlugin({

            minimize: true,
            debug: false,
            options: {

                /**
                 * Html loader advanced options
                 *
                 * See: https://github.com/webpack/html-loader#advanced-options
                 */
                // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
                htmlLoader: {
                    minimize: true,
                    removeAttributeQuotes: false,
                    caseSensitive: true,
                    customAttrSurround: [
                        [/#/, /(?:)/],
                        [/\*/, /(?:)/],
                        [/\[?\(?/, /(?:)/]
                    ],
                    customAttrAssign: [/\)?\]?=/]
                }

            }
        }),
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
            minimize: true,
            sourceMap: true,

             // Don't beautify output (enable for neater output)
            beautify: false,

            // Eliminate comments
            comments: false,



            mangle:  {
                toplevel : true,
                screw_ie8: true,
                keep_fnames: false
            },
            compress: {
                screw_ie8: true,

                dead_code : true,

                unused : true,

                warnings: false,

                // Drop `console` statements
                 drop_console: drop_console
            }

        }),
        new CompressionPlugin({
            regExp: /\.css$|\.html$|\.js$|\.woff$|\.map$/,
            algorithm: "gzip",
            threshold: 2 * 1024,
            minRatio: 0.8
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(ENV)
            }
        })
    ]
});

---------------------------- 2017 年 4 月 20 日更新---- ------------------

必须更新我的模块和组件文件以导入文件的深度链接引用而不是根目录以从 ng 中排除未使用的模块 bootstrap

app.modules.ts

import {  NgbModalModule }                            from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
import {  NgbTooltipModule}                            from '@ng-bootstrap/ng-bootstrap/tooltip/tooltip.module';
import {  NgbAlertModule }                            from '@ng-bootstrap/ng-bootstrap/alert/alert.module';

app.component.ts

import {NgbModal, NgbModalOptions} from '@ng-bootstrap/ng-bootstrap/modal/modal';
import { ModalDismissReasons }                  from '@ng-bootstrap/ng-bootstrap/modal/modal-dismiss-reasons';
import { NgbActiveModal} from '@ng-bootstrap/ng-bootstrap/modal/modal-ref';
import { NgbTooltipConfig }                        from "@ng-bootstrap/ng-bootstrap/tooltip/tooltip-config";

vendor.ts

import { NgbModalModule, NgbModal, NgbModalOptions, ModalDismissReasons, NgbActiveModal, NgbTooltipModule, NgbTooltipConfig, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

------进一步更新------------

遵循

的 tree shaking 配置

https://github.com/Andrey-Pavlov/angular2-webpack-starter/blob/d0a225851e6d63b03a21ad6b7a71552a941229ef/config/webpack.common.js#L220

Answer 1

tl；博士；是您只能从 ng-bootstrap 中挑选您使用的组件，但您只需要导入您正在使用的组件。

如果您只是使用 ng-bootstrap 项目中的单个模块，那么您应该只导入使用的模块（而不是像今天那样导入整个 NgbModule）。方法如下（以模态为例）：

import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap';

...

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModalModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

最后，这里是 plunker 中的一个实例：http://plnkr.co/edit/3TdcMzPBXb3OKWYIQisG?p=preview

此外，在使用 WebPack 时，请确保仅导入它在 vendor.ts 文件中使用的内容（因为 import '@ng-bootstrap/ng-bootstrap'; 将包含所有组件）；

Answer 2

即使我遵循了@pkozlowski.opensource 的建议，我仍然在 Accordion 模块中看到 ng-template 错误。我最终从嵌套路径导入，就像我对 rxjs/Observable:

所做的那样

import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap/modal/modal.module';

...

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModalModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

希望对您有所帮助！

Webpack2 Angular2 ng-bootstrap 摇树

Webpack2 Angular2 ng-bootstrap Tree Shaking

typescript

webpack-2

ng-bootstrap

angular

vendor.ts

webpack.prod.js

app.modules.ts

app.component.ts

vendor.ts

------进一步更新------------