【译】Google出品 – 利用 Webpack 做 web 性能优化

原文 https://developers.google.com/web/fundamentals/performance/webpack/ 作者 Addy Osmani,Ivan Akulov Instroduction 介绍 作者 Addy Osmani 现代 Web 应用经常用到bunding tool来创建生产环境的打包文件(例如脚本、样式等),打包文件是需要优化并压缩最小化,同时能够被让用户更快地下载到。在这篇文章中,我们将会利用webpack来贯穿说明如何优化网站资源。这样可以帮助用户更快地加载你的应用同时获得更好的体验。 webpack 目前是最流行的打包工具之一,深入地利用它的特点去优化代码,将脚本拆分成重要和非重要部分,还有剔除无用的代码能够保证你的应用维持最小的带宽和进程消耗。 Note: 我们创建了一个练习的应用来演示下面这些优化的描述。尽力抽更多的时间来练习这些 tips webpack-training-project 让我们从现代 web 应用中最耗费资源之一的 Javascript 开始。 减小前端体积 利用长时缓存 监控并分析应用 总结 Decrease Front-end Size 减少前端体积 作者 Ivan Akulov 当你正在优化一个应用时,首要事情就是尽可能地将它体积的减小。下面就是利用 webpack 如何做。 Enable minification 启用最小化 最小化是通过去除多余空格、缩短变量名等方式压缩代码。例如:

React 也是类似 – 开发模式下 build 带有一些警告:

这些检查和警告通常在生产环境下是不必要的,但是他们仍然保留在代码中并且会增加库的体积。通过配置 […]

© 2018 JDC. All Rights Reserved.