|
|
<p>
<strong>
vue项目优化的背景
</strong>
</p><p>
为了开发方便及效率, 我们经常使用官方的脚手架来构建项目. 基于vue的项目, 我们通过vue-cli3 来构建. 但是随着项目需求的不断增加. 代码量也随之增大. 文件大小也随着增加. 开发上, 渐渐的出现相关的问题, 这一情况就变得异常棘手. 我们也需要找到解决办法, 来解决这件事情, 提高开发效率及项目的运行效率.
</p><p>
<strong>
以往项目的优化
</strong>
</p><p>
在考虑优化之前, 我们来看下在前后端分离还没有那么异常流行的时候, 我们需要对项目做什么样的优化. 在以往的项目中, 我们的代码基本都是通过服务端渲染方式来响应给用户(这也符合seo). 在这种项目中, 代码的组织方式, 都是由开发人员控制(当然现在也是一样, 只是加入了工具的处理), 按照自己的需要引入相关的代码库. 代码的编写及组织, 基本都是按照团队规范来处理,以便后期的扩展和维护. 因此在页面中需要什么样的脚本或者样式, 及图片等资源都是按需引入.那代码的优化, 就主要表现在:
</p><p>
等等相关的优化. 这里我们就暂时不考虑其他性能的处理: 懒加载, 缓存等等. 性能的处理, 不同的项目优化方式也是不一样的. 离开项目的性能优化, 其实都是没有说服力. 某个性能优化方案在这个项目适合, 另外一个项目可能就不合适了.
</p><p>
<strong>
vue-cli3的优化
</strong>
</p><p>
vue-cli3主要还是建立在webpack和webpack-dev之上的. 所以优化的重点,也应该是通过学习webpack相关的配置, 来优化我们的代码. 在vue-cli3中有两种方式来配置webpack: chainWebpack 和configureWebpack.
</p><p>
chainWebpack的方式可以查看官方教程. configureWebpack的话直接看webpack的官方教程. 再配合看vue-cli3的官方文档, 现在我们来思考实际的优化方式.首先新建一个vue.config.js配置文件, 代码如下:
</p><p>
在优化之前, 我们先看看优化项目的代码情况: 这里的项目是我写的一个demo, 使用了element-ui来做界面.
</p><p class="pgc-img-caption">
</p><p>
单个文件已经达到了8.5M, 这个是非常可怕的. 因此我们必须下定决心来做相关的优化, 减少文件的大小.
</p><p>
<strong>
1. 最小化处理: 代码的最优化, 我们会通过chainWebpak来处理.
</strong>
</p><p>
在这一小节中, 主要使用的是webpack配置中的optimization来完成相关的优化. 我们重点关注下文件的响应代码: app.js文件的返回代码:
</p><p class="pgc-img-caption">
</p><p>
app.js代码是没有做任何优化的, 为此我们来着手解决这一问题: 我们需要最小化相关代码, 配置如下:
</p><p>
然后重新运行我们的项目, 再来观察代码的运行效果.
</p><p class="pgc-img-caption">
</p><p class="pgc-img-caption">
</p><p>
文件大小已经减少到8.4M, 然后看到的源码也是被压缩过了. 其他的文件大小也是相应的减少了(我们在这篇文章中, 主要关注文件过大的). 大家也可以看看自己的项目文件情况.
</p><p>
<strong>
2. 分割代码
</strong>
</p><p>
分割代码也是我们需要重点操作的步骤: 利用webpack的SplitChunksPlugin来完成. 参数的配置, 可以参考官方的.这里我们使用默认的配置(细节优化, 各自根据自己的需要调整). 要注意的就是官方的说明:
</p><p class="pgc-img-caption">
</p><p class="pgc-img-caption">
</p><p>
这一波操作之后, 代码文件分割了出来, 单个文件最大变成了7.4M, 做到了文件大小的减少. 为了了解为什么文件还是在M的单位, 我们可以 继续设置splitChunks的参数, 了解哪个模块会更大(这里可以观看视频中的配置) 我这里就不带大家去设置了, 自行解决, 这样也可以让自己更了解和熟悉这些配置参数.
</p><p>
注意:
</p><p>
参考splitChunks插件的配置: 最小文件大小, 最大文件大小, 设置异步方式, 还有模块的缓存设置, 名称的设置等等. 但是一定要平衡文件大小和文件数量. 数量多了, 请求也会变慢的, 影响性能. 不过大家可以亲自动手设置符合自己的项目参数, 查看项目的效果. 我这里的话, 就只设置成这样了, 避免文件数量的增加了(以后项目随着增大, 也会继续做相关的优化).
</p><p>
<strong>
3. 提取公用代码, 使用免费的cdn资源.
</strong>
</p><p>
首先我们要思考: 为什么会有个文件会如此之大? 这个文件会这么大, 最主要是我们引入了不同的模块库, 比如vue, vuex, vue-router, element-ui等公共资源库. 那我们是否可以将他们提取出来? 答案是肯定. 需要使用externals参数来配置, 配置如下:
</p><p>
通过externals参数来忽略我们这些模块的打包. 然后我们重新运行项目, 看看效果.
</p><p class="pgc-img-caption">
</p><p>
我们的代码已经减少到2.8M. 但是这里有个问题, 就是我们的代码没有执行起来, 抛出了异常. 因为我们需要将vue, vuex,vue-router等引入到项目界面中, 需要对html做一下处理. 这里我们引入网络上的免费资源, 就不下载相关代码放到项目中了, 这样也减少我们服务器的压力.
</p><p class="pgc-img-caption">
</p><p>
在index.html页面加入这些链接. 然后我们运行效果看下.
</p><p class="pgc-img-caption">
</p><p>
<strong>
4. 提取css代码, 到单个文件中.
</strong>
</p><p>
项目优化到这一步, 你们有没有发现: 项目的请求中, 没有看到css的请求.那是因为css代码都已嵌入到js文件中, 在执行js代码的时候, 会动态的将css代码生成style标签. 这也是造成文件过大的原因之一. 这时候我们需要提取css代码到文件中, 只需要将css配置一下:
</p><p>
然后运行项目, 效果如下(css的配置可以看官方的文档).
</p><p class="pgc-img-caption">
</p><p>
有没有发现, 我们的代码在继续减少. 已经减少到2.3m, 其他都是以k为单位了. css文件的请求也出现在了面板中. 为了减少css文件的大小, 还得需要提取一个css文件, 那就是单独分离element-ui的样式文件. 我们现在用的是本地引入element-ui的样式, 也需要改为免费资源引入的形式
</p><p class="pgc-img-caption">
</p><p>
这里我们需要把它注释掉. 然后在html文件中, 加入免费资源:
</p><p class="pgc-img-caption">
</p><p>
然后再运行项目. 找到一个vendor开头的css文件, 这里从205k减少到8.3k
</p><p class="pgc-img-caption">
</p><p>
注意到的是: 我们这里还有2.3M的大文件, 我们得继续优化.
</p><p>
之所以文件还有这么大, 是因为还引入了vue-codemirror这个组件. 同样我们需要将这个组件单独提取出来. 通过使用免费资源解决: 配置跟vue, vuex, vue-router这种方式一样,我们就不再详细说明(忘记的, 可以往前面章节了解). 这个组件用到了codemirror的样式. 也需要引入进来. 最后的效果.
</p><p class="pgc-img-caption">
</p><p>
经过上面的步骤, 效果还是比较明显的, 最大文件已经是1.4M了. 这里我们解释一下, 还有1.4M的原因: 里面的代码包含了核心的js, 兼容式的代码等公用的相关代码. 这些我们就没必要去做提取了.
</p><p>
还有就是, 我们这里使用的是开发环境的模式, 其实有些代码是多出来的: 比如热加载, webpack-dev-server这些插件.
</p><p>
<strong>
5. gzip压缩.
</strong>
</p><p>
gzip压缩, 是目前常用到的压缩方式. 就单纯基于项目效果而言, 我们引入一个插件: compression-webpack-plugin, 来完成js文件的压缩.
</p><p>
安装该插件:
</p><p>
然后引入相关代码:
</p> |
|
发表于 2023-10-24 10:15:46