## 减小打包体积 1. 按需加载:如果我们将代码全部打包进一个 JS 文件中,虽然减少了请求数,但同时也加载了很多暂时不需要的代码,耗费了更长时间,而且,在 HTTP/2 中,这种做法已经算不上有优势了。为了能更快地呈现页面,每个页面需要加载地文件体积当然要越小越好,这时候我们就可以使用按需加载,将每个路由页面单独打包。 2. Tree Shaking:删除项目中未被使用的代码,在 webpack4 中生产环境会启动开启这个优化功能。 3. Scope Hoisting:会分析模块之间的依赖关系,然后在打包过程中尽可能把多个模块合并到一个函数中,减少代码量。在 webpack4 中可以通过 `optimization.concatenateModules` 开启这个功能。
减小打包体积
按需加载:如果我们将代码全部打包进一个 JS 文件中,虽然减少了请求数,但同时也加载了很多暂时不需要的代码,耗费了更长时间,而且,在 HTTP/2 中,这种做法已经算不上有优势了。为了能更快地呈现页面,每个页面需要加载地文件体积当然要越小越好,这时候我们就可以使用按需加载,将每个路由页面单独打包。
Tree Shaking:删除项目中未被使用的代码,在 webpack4 中生产环境会启动开启这个优化功能。
Scope Hoisting:会分析模块之间的依赖关系,然后在打包过程中尽可能把多个模块合并到一个函数中,减少代码量。在 webpack4 中可以通过
optimization.concatenateModules开启这个功能。