签出项目文件是什么_vue-cli3 项目框架优化(OneLine周分享)

vue项目优化的背景

为了开发方便及效率, 我们经常使用官方的脚手架来构建项目. 基于vue的项目, 我们通过vue-cli3 来构建. 但是随着项目需求的不断增加. 代码量也随之增大. 文件大小也随着增加. 开发上, 渐渐的出现相关的问题, 这一情况就变得异常棘手. 我们也需要找到解决办法, 来解决这件事情, 提高开发效率及项目的运行效率.

以往项目的优化

在考虑优化之前, 我们来看下在前后端分离还没有那么异常流行的时候, 我们需要对项目做什么样的优化. 在以往的项目中, 我们的代码基本都是通过服务端渲染方式来响应给用户(这也符合seo). 在这种项目中, 代码的组织方式, 都是由开发人员控制(当然现在也是一样, 只是加入了工具的处理), 按照自己的需要引入相关的代码库. 代码的编写及组织, 基本都是按照团队规范来处理,以便后期的扩展和维护. 因此在页面中需要什么样的脚本或者样式, 及图片等资源都是按需引入.那代码的优化, 就主要表现在:

1. js,css代码公用代码提取, 按照需要引入
2. js,css代码的最小化压缩
3. 图片文件的压缩
4. gzip的压缩

等等相关的优化. 这里我们就暂时不考虑其他性能的处理: 懒加载, 缓存等等. 性能的处理, 不同的项目优化方式也是不一样的. 离开项目的性能优化, 其实都是没有说服力. 某个性能优化方案在这个项目适合, 另外一个项目可能就不合适了.

vue-cli3的优化

vue-cli3主要还是建立在webpack和webpack-dev之上的. 所以优化的重点,也应该是通过学习webpack相关的配置, 来优化我们的代码. 在vue-cli3中有两种方式来配置webpack: chainWebpack 和configureWebpack.

chainWebpack的方式可以查看官方教程. configureWebpack的话直接看webpack的官方教程. 再配合看vue-cli3的官方文档, 现在我们来思考实际的优化方式.首先新建一个vue.config.js配置文件, 代码如下:

module.exports = {}

在优化之前, 我们先看看优化项目的代码情况: 这里的项目是我写的一个demo, 使用了element-ui来做界面.

单个文件已经达到了8.5M, 这个是非常可怕的. 因此我们必须下定决心来做相关的优化, 减少文件的大小.

1. 最小化处理: 代码的最优化, 我们会通过chainWebpak来处理.

在这一小节中, 主要使用的是webpack配置中的optimization来完成相关的优化. 我们重点关注下文件的响应代码: app.js文件的返回代码:

app.js代码是没有做任何优化的, 为此我们来着手解决这一问题: 我们需要最小化相关代码, 配置如下:

module.exports = { chainWebpack: config => { config.optimization.minimize(true); }}

然后重新运行我们的项目, 再来观察代码的运行效果.

文件大小已经减少到8.4M, 然后看到的源码也是被压缩过了. 其他的文件大小也是相应的减少了(我们在这篇文章中, 主要关注文件过大的). 大家也可以看看自己的项目文件情况.

2. 分割代码

分割代码也是我们需要重点操作的步骤: 利用webpack的SplitChunksPlugin来完成. 参数的配置, 可以参考官方的.这里我们使用默认的配置(细节优化, 各自根据自己的需要调整). 要注意的就是官方的说明:

module.exports = {  chainWebpack: config => { config.optimization.minimize(true); config.optimization.splitChunks({ chunks: 'all' }) }}

这一波操作之后, 代码文件分割了出来, 单个文件最大变成了7.4M, 做到了文件大小的减少. 为了了解为什么文件还是在M的单位, 我们可以 继续设置splitChunks的参数, 了解哪个模块会更大(这里可以观看视频中的配置) 我这里就不带大家去设置了, 自行解决, 这样也可以让自己更了解和熟悉这些配置参数.

注意:

参考splitChunks插件的配置: 最小文件大小, 最大文件大小, 设置异步方式, 还有模块的缓存设置, 名称的设置等等. 但是一定要平衡文件大小和文件数量. 数量多了, 请求也会变慢的, 影响性能. 不过大家可以亲自动手设置符合自己的项目参数, 查看项目的效果. 我这里的话, 就只设置成这样了, 避免文件数量的增加了(以后项目随着增大, 也会继续做相关的优化).

3. 提取公用代码, 使用免费的cdn资源.

首先我们要思考: 为什么会有个文件会如此之大? 这个文件会这么大, 最主要是我们引入了不同的模块库, 比如vue, vuex, vue-router, element-ui等公共资源库. 那我们是否可以将他们提取出来? 答案是肯定. 需要使用externals参数来配置, 配置如下:

module.exports = {  chainWebpack: config => { config.optimization.minimize(true); config.optimization.splitChunks({ chunks: 'all' }) config.externals({ vue: 'vue', vuex: 'vuex', 'vue-router': "'vue-router'