避免未使用的资产 Angular

Question

从文档中我可以看到 Angularassets/按原样复制目录。因此，我想知道是否有一种方法可以避免这种行为，并且只复制在我的应用程序中实际使用的资产。

我见过具有以下配置的项目（webpack，尽管不是 Angular）：

{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        minimize: true,
        attrs: ['img:src', 'video:poster', 'source:src']
      }
    }
  ]
},
{
  test: /\.(png|jpg|svg|gif|webm|mp4|ttf|eot|woff|woff2)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[hash].[ext]',
        context: 'src'
      },
    },
  ],
},

这仅复制 HTML 文件中存在的资源。

这可以在 Angular 项目中实现吗？

Answer 1

目前，Angular 13 无法开箱即用地执行此操作。

但是，您可以编写一个角度构建器或将构建后脚本添加到 package.json

假设您要添加构建后脚本：

读取项目中的相关文件并编写一个函数来搜索资源路径：

fs.readdir(dirname, function(err, filenames) {
   filenames.forEach(function(filename) {
     fs.readFile(dirname + filename, 'utf-8', function(err, content) {
       const inUse = searchForAssetUse(filename, content);
       if(!inUse) fs.unlinkSync(dirname + filename) //remove the file if it's not in use
     });
   });
 }); 

这样您就可以只捆绑项目中正在使用的资源。您可以将脚本添加到 package.json

请注意，构建后脚本将在构建脚本之后自动运行

"scripts": {
    "build": "ng run project:prerender",
    "postbuild": "node cleanAssets.js"
    ...
}