详解Vue打包优化之code spliting

Vue 打包优化之 Code Spliting Code Spliting 是一种常见的性能优化技术，在 Vue 项目中尤其重要。它的主要思想是将业务代码和基础库代码进行拆分，将首屏和非首屏的代码进行剥离，从而提高首屏加载速度和用户体验。 Code Spliting 的优点 1. 减少首屏加载时间：通过将首屏和非首屏的代码进行剥离，可以减少首屏的加载时间，提高用户体验。 2. 充分利用浏览器缓存：业务代码和基础库代码的分离可以充分利用浏览器缓存来加载基础库代码，减少请求数量和加载时间。 3. 按需异步加载：Code Spliting 可以实现按需异步加载，仅加载当前页面需要的代码，从而减少加载时间和请求数量。 Code Spliting 在 Vue 项目中的应用 在 Vue 项目中，Code Spliting 可以通过使用 Webpack 的 Code Spliting 功能实现。需要在 Webpack 配置文件中配置 entry point，指定不同的代码块，然后使用 Webpack 的 Code Spliting 功能将其拆分出来。 例如，在上面的配置文件中，我们可以看到 entry point 配置了两个代码块：`vendor` 和 `app`。其中，`vendor` 代码块包含了 Vue、Vue Router 和 Vuetify 等基础库代码，而 `app` 代码块包含了业务代码。 使用 Webpack-bundle-analyzer 分析打包结果 在上面的配置文件中，我们还使用了 Webpack-bundle-analyzer 插件来分析打包结果。通过这个插件，我们可以很清楚地看到每个代码块的大小和包含的模块，从而更好地优化代码。 例如，在上面的配置文件中，我们可以看到 `vendor` 代码块包含了 Vue、Vue Router 和 Vuetify 等基础库代码，而 `app` 代码块包含了业务代码。通过分析打包结果，我们可以发现哪些模块被重复打包，从而进行相应的优化。 实战经验 在近期的项目中，我们采用 Vuetify 改造了一个内部系统。 처음，我们使用了最常见的 Webpack 配置，功能开发很快，但是打包时发现效果不是很明显，打出很多大包。于是，我们使用了 Code Spliting 功能将业务代码和基础库代码进行拆分，将首屏和非首屏的代码进行剥离，从而提高了首屏加载速度和用户体验。 Code Spliting 是一种非常有效的性能优化技术，在 Vue 项目中尤其重要。通过合理地拆分代码，充分利用浏览器缓存和按需异步加载，可以大大提高首屏加载速度和用户体验。