Angular cli 1.6.7 building applications some configuration of webback

Building application of angular cli 1.6.7

Some configuration of webpack

Label: Angular

The project initialized with ng new my app does not contain the webpack configuration file. You need the ng eject command to add the webpack.config.js configuration file.

At this time, the file has a more complete configuration. But there is a lack of other needs.

1. Uglifyjs webpack plugin JS compression plug-in

The js file is compressed to reduce the volume of the packed file.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

...

new UglifyJsPlugin({
  "test": /\.js$/i,
  "extractComments": false,
  "sourceMap": true,
  "cache": false,
  "parallel": false,
  "uglifyOptions": {
    "output": {
      "ascii_only": true,
      "comments": false
    },
    "ecma": 5,
    "warnings": false,
    "ie8": false,
    "mangle": {
      properties: {
      regex: /^my_[^_]{1}/,
      reserved: ["$", "_"]
      }
    },
    "compress": {}
  }
})

2. Compression webpack plugin to generate gzip file plug-in

Further reduce the volume of packed files.

const CompressionWebpackPlugin = require('compression-webpack-plugin');

...

new CompressionWebpackPlugin()

This requires the server to open gzip on;. For example, nginx requires the following configuration for the server:

conf/nginx.conf:

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    # Open gzip
    gzip  on;
    gzip_static on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    server {
        listen       8088;
        server_name  localhost;

        location / {
            root   website/angular;
            index  index.html;
        }
    }
}

After the above two steps of compression, my test deployment file is from 3.xMB to 224KB.

3. Clean web pack plugin

Every time npm run build, a new packing file (hash added to the file name) will be generated. This plug-in can delete the old file after packing.

const CleanWebpackPlugin = require('clean-webpack-plugin');

...

new CleanWebpackPlugin(['dist'], {
    root: projectRoot,
    verbose:  true,
    dry:      false
})

You may also need to package css files separately, but no good solution (extract text web pack plugin) has been found.

My environment
Angular CLI: 1.6.7 (e)
Node: 9.2.0
OS: win32 x64
Angular: 5.2.3

The end...    Last updated by: Jehorn, Mar 14, 2018, 03:40 PM

Tags: Javascript Webpack angular Nginx

Posted on Wed, 01 Apr 2020 23:50:48 -0700 by mj_23