如何缩小Angular 8开发人员版本

Question

默认情况下，Angular CLI(版本-8(不会删除注释和minify-js-dev-build生成的文件。(main.js、vendor.js、scripts.js等(。

我们正在导入JitCompiler，因此需要使用优化生成的输出文件(vendor.js、main.js等(进行开发构建

我添加了我自己的webpack文件webpackext.config.js，并通过"@angular builders/custom webpack:浏览器。我可以使用以下配置从生成的文件中删除注释。我还需要使用一些插件缩小生成的文件。我们如何才能做到这一点，还需要有关插件和配置方法的信息。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require("path");
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new UglifyJsPlugin({
uglifyOptions: {

output: {
comments: false
}
}
})
]
}  

为什么我们需要这个：我们使用RequireJS加载延迟加载模块。延迟加载的模块(sample.module.js(由最终用户放置。它们从应用程序生成延迟加载模块。由于将jit编译器导入我们的系统以按需创建最终用户的组件，因此我们无法进行生产构建。我们已将系统从角度4升级到角度8。在Angular 4的早期版本中，所有的js文件都被缩小了。但在Angular 8中，js文件的大小增加了一倍。

require.ensure(
["assets/samples/sample.module.js"], 
(require) => {
let SampleCo = require(assets/samples/sample.module.js");
this._compiler
.compileModuleAndAllComponentsAsync(
SampleCo.SampleCustomModule
).then((compiled) => {
const component1 = compiled.componentFactories.find(
(m) => m.selector == "sample-comp1"
);    });
//here we create component with ViewContainerRefr
},
"custom/sampleLib" 
}

使用UglifyJsPlugin后，生成的js文件会被缩小。然而，在加载系统时出现错误，错误如下

Uncaught Error: Can't resolve all parameters for hC: (?).
at Li (vendor.js:1)
at n_._getDependenciesMetadata (vendor.js:1)
at n_._getTypeMetadata (vendor.js:1)
at n_.getNgModuleMetadata (vendor.js:1)
at n_.getNgModuleSummary (vendor.js:1)
at vendor.js:1
at Array.forEach (<anonymous>)
at n_.getNgModuleMetadata (vendor.js:1)
at n_.getNgModuleSummary (vendor.js:1)
at vendor.js:1

Answer 1

我现在通过将其添加到angular.json文件的configurations部分来解决它：

"configurations": {
"dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}

然后运行：ng build -c=dev

Answer 2

为什么需要uglify开发构建？开发构建不应该去任何地方，除非你的开发箱。

所有QA/QC发布都应该是产品构建，这些构建会自动进行树摇和丑化。

因此，您希望调试代码不被丑化，以便浏览器工具中的源选项卡可读。