skip to Main Content

I built an app via angular cli– Angular 4 (ng build –prod –bo) and uploaded on https://armen.jahanbani.ir/ .

I tried every possible code for enabling gzip-compression via .htaccess but none of them worked.

Here’s my .htaccess so far:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>



## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##





RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Here’s my response headers:

accept-ranges:bytes
cache-control:public, max-age=604800
content-length:1343404
content-type:application/javascript
date:Wed, 02 Aug 2017 14:16:00 GMT
expires:Wed, 09 Aug 2017 14:16:00 GMT
last-modified:Wed, 02 Aug 2017 12:20:30 GMT
server:LiteSpeed
status:200

And request headers :

:authority:armen.jahanbani.ir
:method:GET
:path:/main.17622fc4e9e5f19aa68d.bundle.js
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.8,fa;q=0.6
alexatoolbar-alx_ns_ph:AlexaToolbar/alx-4.0.1
cache-control:no-cache
pragma:no-cache
referer:https://armen.jahanbani.ir/home
user-agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

I even tried to force server to compress files with adding Header append content-encoding: gzip but that didn’t work either and got an error.

Should I work on .htaccess and server, or something is wrong with my angular files?

Thanks

2

Answers


  1. Chosen as BEST ANSWER

    You have to install a node package called 'compression' to your project and that will enable the angular project to use gzip compression.

    npm install --save compression
    

    https://www.npmjs.com/package/compression


  2. Have you tried enable gzip from WebAdmin directly? You can just add Compressible Types there too, it’s more easier for me to setup gzip in this way.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search