2017-07-25 78 views
0

有一些關於角度的: 當代碼在線時 你可以將它打包爲js,這樣就可以減少HTTP請求的數量; 現在我將所有文件打包成一個包。 Js,但加載該網站需要20秒 我該如何處理它? - 注:包裝技術使用webpack關於壓縮的webpack

+0

你與-prod標誌建立呢? – Carsten

+0

這些鏈接非常適合提高性能。 [Link 1](http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/), [Link2](http://blog.mgechev .com/2017/01/17/angular-in-production /) –

回答

0

做完你的ng build -prod你可以用uglifyjs壓縮你的js文件。

  • 全球安裝:

NPM安裝醜化-JS -g

  • 壓縮您的js文件。 (和選擇將是壓縮它們一個接一個)

uglifyjs main.bundle.js -c頂層,序列=假-o main.bundle.min.js

uglifyjs inline.bundle的.js -c 頂層,序列=假-o inline.bundle.min.js

uglifyjs polyfills.bundle.js -c頂層,序列=假-o polyfills.bundle.min.js

uglifyjs vendor.bundle.js -c 頂層,序列=假-o vendor.bundle.min.js

uglifyjs styles.bundle.js -c頂層,序列=假-o styles.bundle.min。 JS

  • 變化的index.html指.min.js

**注:我會建議創建一旦你嘗試,它會自動做這個NPM腳本。要做到這一點改變你的package.json:

"scripts": { 
    ... 
    "compress": "sh compress.sh" 
    }, 

然後用運行 - >NPM運行腳本壓縮

+1

由於他使用的是webpack,因此他可以使用uglifyjs-webpack-plugin進行生產構建。對於webpack 1,它已經內置在webpack.optimize.UglifyJsPlugin上。對於webpack 2,你必須安裝並需要它。 – Ignasi

+0

你說得對@Ignasi。新版本的角色提供https://angular.io/guide/webpack#plugins – kimy82