最小化Angular 4代码

Question

我在VS 2017中使用Asp Core + Angular 4模板+ webpack。我已经发布了我的应用程序..并查看ClientApp / dist / main-server.js，我发现内容没有被丑化和缩小。像这样

    ...
ConfirmComponent.prototype.ngAfterViewInit = function () {
            try {
                $('.modal').removeClass('fade'); 
                setTimeout(function () {
                    $('.modal').addClass('fade');
                }, 500);
            }
            catch (exception) { }
        };
...

在webpack.config.vendor.js中，我可以看到一个插件调用：

.... 
  plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()   //HERE
        ])
    });
....

在package.json中，我添加了： "uglifyjs-webpack-plugin": "1.0.1",如何将代码丑化并缩小？ 谢谢

Answer 1

我建议将代码重构为可与Angular CLI一起使用，然后使用以下代码进行精简：

ng build --prod

对于.net核心上的Web API项目，一旦您使用（在与解决方案（sln）文件相同的目录中运行此应用程序）创建新的Angular应用，即可：

ng new my-app

然后：

• 在angular-cli.json中 ，将outDir更改为wwwroot
• 在tsconfig.json中 ，将outDir更改为./wwwroot/out-tsc

此时， ng build会将所有内容发布到wwwroot ，只要您包括：

app.UseDefaultFiles();

在Startup.cs的Configure方法中，浏览到API的根目录将显示Angular应用程序。

此外，我喜欢包含一个名为proxy.config.json的代理文件，该文件如下所示（将端口替换为您的API端口）：

{
  "/api/*": {
    "target": "http://localhost:12345",
    "secure": false,
    "logLevel": "debug"
  }
}

然后，我修改package.json中的启动脚本，如下所示：

"start": "ng serve --proxy-config proxy.config.json"

此时，您可以调试您的API，只需从命令行运行npm start即可充分利用Angular CLI。 然后，当您要释放时，运行：

ng build --prod

此外，在构建Web API项目时，您可以修改.csproj文件以构建和最小化angular应用程序，如下所示：

<Target Name="Build Angular" BeforeTargets="Build">
  <Message Text="* * * * * * Building Angular App * * * * * *" Importance="high" />
  <Exec Command="ng build --prod" />
</Target>

我个人认为Angular是一个全能框架。 我看不到将其与Razor一起使用的价值。 如果要逐步增强，请使用React！