Angular 7 使用 ng build --prod 缩小资产

Question

JavaScript and CSS files in /assets are not minified after ng build --prod . Does someone know how I can minify those files? I don't see anything in the angular doc.

Answer 1

Everything you build in production are already minify if it not minify I think you havent turn on configuration in angular.json. You can use these config in your angular.json

"configurations": {
    "production": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": true,
        "buildOptimizer": true,
        "serviceWorker": true,
        "deleteOutputPath": true,
        "budgets": [
            {
                "type": "initial",
                "maximumWarning": "2mb",
                "maximumError": "5mb"
            }
        ]
    }
}

Then run ng build --prod again

Answer 2

When you run ng build --prod angular-cli creates a new folder named dist in your project folder. the dist is the folder that you upload to your server in order to deploy your project.

the assets folder is not minimized because there is no code to minimize in that folder, angular-cli does not minimize images, svgs text files etc ... if you want to minify images, you can search for online tools such as TinyJPG

edit:

Not necessarily mean that you want to minimize your images, but in your assets folder there shouldn't be any files which are .js .css .html .ts etc... only Jsons, images and other assets

Answer 3

When you run ng build --prod angular will create a new folder in your project called dist. the dist, This is the folder that you place on your server to run your application from. You will see inside that folder, you will get a few files. All of your CSS and JS will be bundled and minified into one file each

Answer 4

ng build creates a build in the dist folder using webpack . The dist folder is published to your production website and contains everything needed to run your website (the minified Angular framework, your code, and dependencies referenced in the application).

CSS and JavaScript in the head of index.html will be referenced from your assets folder without minification. Consider adding these files to your configuration instead. The working files in the source folder are used for development purposes and are not modified during the build process.

Answer 5

You can use webpack to minify the ts file:

Install webpack, webpack-cli, @babel/preset-env and @babel/preset-typescript;

Add webpack.config.js to your project root folder:

const path = require('path');

module.exports = [
  {
    mode: 'production',
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.json'],
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
                presets: [
                    '@babel/preset-env',
                    '@babel/preset-typescript'
                ]
            }
          }
        }
      ],
    },
    entry: {
      main: './apps/js/some-file.ts'
    },
    output: {
      path: path.resolve(__dirname, './dist/js/'),
      filename: 'some-file.min.js'
    }
  }
];

In your build command, just add & webpack --watch

Hope that helps