如何解决如何最小化Angular 8 Dev Build
默认情况下,Angular CLI(ver-8)不会删除注释并最小化js dev构建生成的文件。 (main.js,vendor.js,scripts.js等)。
我们正在导入JitCompiler,因此需要具有优化生成的输出文件(vendor.js,main.js ect)的Dev Build
我添加了自己的webpack文件webpackext.config.js。并通过“ @ angular-builders / custom-webpack:browser”使用它。我能够使用以下配置从生成的文件中删除注释。我还需要使用某些插件来缩小生成的文件。我们该怎么做,需要有关插件的信息和配置方法。
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
}
}
})
]
}
为什么需要这个:我们正在使用Require JS加载延迟加载的模块。延迟加载的模块(sample.module.js)由最终用户放置。他们从应用程序生成延迟加载的模块。由于将jit编译器导入我们的系统以按需创建最终用户的组件,因此我们无法进行生产构建。我们已将系统从angular 4升级到angular8。在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
解决方法
您为什么需要取消开发版本?开发人员构建永远都不能移到您的开发箱之外。
所有QA / prod版本均应为prod版本,并会自动摇晃和丑化。
因此,您希望不调试调试代码,以便浏览器工具中的“源”选项卡可读。
,我现在通过将其添加到 configurations
文件的 angular.json
部分解决了这个问题:
"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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。