Vue项目构建优化

最新推荐文章于 2024-04-09 22:12:35 发布

奇舞周刊

最新推荐文章于 2024-04-09 22:12:35 发布

阅读量1.5k

点赞数 13

文章标签： vue.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/136324235

版权

本文介绍了360奇舞团前端开发工程师针对Vue项目构建时间过长的问题进行的优化，包括通过webpack-bundle-analyzer分析项目体积，使用动态链接库技术和开启多线程加载耗时loader，成功将构建时间从66秒降至34秒，提高了48%的效率。

摘要由CSDN通过智能技术生成

本文作者为 360 奇舞团前端开发工程师宁航

在开发大型前端项目时，往往是一个需求对应一个分支，当完成需求后，就需要将代码打包、部署。代码通常需要部署到多个环境中，这些环境包括：日常环境、测试环境、回归环境和生产环境。回归环境用于在发布前进行测试，生产环境是用户访问的版本。随着时间的推移，项目中会不断引入许多新的依赖（如第三方库、插件等）和图片资源，代码数量也会逐渐增多，从而导致构建项目更加耗时，这也意味着部署项目需要消耗更长的时间。

我负责的项目构建需要 66 秒，有时将代码部署到日常环境后，还需要临时修改重新部署；随后再依次部署到测试环境、回归环境，验证无误后，才能部署到线上环境。如果碰到要紧急上线的任务，这一过程无疑是十分费时的。因此，我决定针对项目构建时间过长的问题进行优化，以此来提高工作效率。本文将对如何优化项目构建速度进行详细介绍，具体过程如下：

一、前期准备

当前的构建工具有很多种，例如Rollup、Webpack、Vite等，在进行优化工作前，首先要明确项目使用的是哪个构建工具，我的项目是使用Vue CLI 3创建的，Vue CLI 在创建项目时会默认使用 Webpack 来构建项目，但在 Vue CLI中，默认情况下是不直接暴露 webpack 配置的，只能通过 vue.config.js 文件来修改配置。

其次，由于webpack在不断更新，新版本会增加许多优化策略，因此，还要明确项目使用的webpack版本，再基于这个版本，采用更有针对性的优化方法。经查询，发现Vue CLI 3对应webpack4，后续的优化方法将围绕该版本展开。

最后，我们还需要对构建过程进行详细分析，以便制定合理的优化策略。当我们运行如下命令，就会开始构建：

yarn build

yarn build会执行package.json中定义的构建脚本，在我的项目中，实际上运行了vue-cli-service build，该命令会进行如下操作：

（1）检查配置文件： Vue CLI首先会查找并解析项目中的配置文件vue.config.js，以获取构建配置和其他相关的配置信息。

（2）代码转译和打包： Vue CLI会使用webpack和相关的加载器（例如babel-loader）对项目的源代码进行转译和打包。这包括将Vue单文件组件转换为JavaScript、处理CSS预处理器（如Sass或Less）等。

（3）静态资源处理： Vue CLI会处理项目中的静态资源，如图片、字体等文件。这可能包括复制这些文件到输出目录，并在构建过程中引入适当的路径。

（4）压缩和优化： 构建过程还涉及到对输出的JavaScript、CSS和其他资源文件进行压缩和优化，以减小文件大小并提高应用性能。

核心步骤如下图所示：

现在，我们可以思考下可以在哪个阶段进行优化了。“源代码打包”是最先开始的操作，我首先想到的是这一阶段消耗的时间必然与代码体积呈正相关，即代码体积越大，需要编译的时间就越长，大致如下图所示。因此，如果能减少需要打包的代码体积，就可以节省一部分时间了。

此外，“源代码打包”阶段还会使用配置的loader对代码进行处理，在一个项目中可以配置多个loader，例如用vue-svg-inline-loader将 SVG 文件转换为 Vue 组件中的内联 SVG ，用babel-loader来转译js文件。但webpack为单线程模式，只能依次使用每个loade