关于压缩的webpack

问题描述:

有一些关于角度的: 当代码在线时 你可以将它打包为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 /) –

做完你的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