在 Angular CLI 8 中,默认情况下会使用 Angular's production build 配置来生成优化后的代码,其中包括了一些性能优化的功能,如代码压缩、Tree-shaking、模块拆分等,这些优化会导致生成的 main.js 文件大小变大。
如果你想要生成更小的文件,可以使用以下方法:
在 Angular CLI 8 中,默认会使用 Terser 进行代码压缩。你可以在 angular.json
中的 projects -> your-project-name -> architect -> build -> options
下添加以下配置:
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractCss": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
你可以手动配置 Webpack 来进一步优化生成的代码。首先,安装 @angular-builders/custom-webpack
包:
npm install @angular-builders/custom-webpack --save-dev
然后,在 angular.json
中的 projects -> your-project-name -> architect -> build -> builder
属性中,将值修改为 @angular-builders/custom-webpack:browser
。
接下来,在项目根目录下创建一个名为 webpack.config.js
的文件,并添加以下配置:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 删除所有的 console 语句
},
},
}),
],
},
};
这样就可以使用自定义的 Webpack 配置来生成优化后的代码。
请注意,以上配置只是一些常见的优化方法,具体的配置可能需要根据你的项目需求进行调整。你可以根据官方文档或其他资源进一步了解 Angular CLI 和 Webpack 的配置选项。