Angular CLI本身不会对资源进行缩小和混淆,但它提供了一些配置选项,可以与其他工具配合使用来实现资源的缩小和混淆。
一种常见的做法是使用UglifyJS对生成的JavaScript文件进行缩小和混淆。以下是一个示例:
npm install uglifyjs-webpack-plugin --save-dev
webpack.config.js
文件中,添加以下代码:const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...其他配置
plugins: [
// 添加UglifyJsPlugin插件
new UglifyJsPlugin()
]
};
这样配置后,当你运行ng build
或ng serve
命令时,Angular CLI将使用UglifyJS对生成的JavaScript文件进行缩小和混淆。
另一个常用的工具是Terser,它是UglifyJS的替代品,提供了更好的性能和可读性。以下是一个使用Terser的示例:
npm install terser-webpack-plugin --save-dev
webpack.config.js
文件中,添加以下代码:const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// ...其他配置
optimization: {
minimizer: [
// 添加TerserPlugin插件
new TerserPlugin()
]
}
};
这样配置后,当你运行ng build
或ng serve
命令时,Angular CLI将使用Terser对生成的JavaScript文件进行缩小和混淆。
需要注意的是,以上示例中的webpack.config.js
文件是Angular CLI生成的默认配置文件,如果你已经自定义了该文件,需要将相应的代码添加到你的配置中。
另外,对于CSS文件的缩小和混淆,你可以使用PostCSS插件来实现。具体的配置方法可以参考PostCSS的文档。