vue-cli3 项目框架优化(OneLine周分享)-技术教程-四时宝库

vue项目优化的背景

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

以往项目的优化

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

js,css代码公用代码提取, 按照需要引入
js,css代码的最小化压缩
图片文件的压缩
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'",
 'element-ui': "'element-ui'"
 })
 }
}

通过externals参数来忽略我们这些模块的打包. 然后我们重新运行项目, 看看效果.

我们的代码已经减少到2.8M. 但是这里有个问题, 就是我们的代码没有执行起来, 抛出了异常. 因为我们需要将vue, vuex,vue-router等引入到项目界面中, 需要对html做一下处理. 这里我们引入网络上的免费资源, 就不下载相关代码放到项目中了, 这样也减少我们服务器的压力.

在index.html页面加入这些链接. 然后我们运行效果看下.

4. 提取css代码, 到单个文件中.

项目优化到这一步, 你们有没有发现: 项目的请求中, 没有看到css的请求.那是因为css代码都已嵌入到js文件中, 在执行js代码的时候, 会动态的将css代码生成style标签. 这也是造成文件过大的原因之一. 这时候我们需要提取css代码到文件中, 只需要将css配置一下:

module.exports = {
 css: {
 extract: true
 },
 chainWebpack: config => {
 config.optimization.minimize(true);
 config.optimization.splitChunks({chunks: 'all'})
 config.externals({
 vue: 'Vue',
 vuex: 'Vuex',
 'vue-router': "VueRouter",
 'element-ui': "'element-ui'"
 })
 }
}

然后运行项目, 效果如下(css的配置可以看官方的文档).

有没有发现, 我们的代码在继续减少. 已经减少到2.3m, 其他都是以k为单位了. css文件的请求也出现在了面板中. 为了减少css文件的大小, 还得需要提取一个css文件, 那就是单独分离element-ui的样式文件. 我们现在用的是本地引入element-ui的样式, 也需要改为免费资源引入的形式

这里我们需要把它注释掉. 然后在html文件中, 加入免费资源:

然后再运行项目. 找到一个vendor开头的css文件, 这里从205k减少到8.3k

注意到的是: 我们这里还有2.3M的大文件, 我们得继续优化.

之所以文件还有这么大, 是因为还引入了vue-codemirror这个组件. 同样我们需要将这个组件单独提取出来. 通过使用免费资源解决: 配置跟vue, vuex, vue-router这种方式一样,我们就不再详细说明(忘记的, 可以往前面章节了解). 这个组件用到了codemirror的样式. 也需要引入进来. 最后的效果.

经过上面的步骤, 效果还是比较明显的, 最大文件已经是1.4M了. 这里我们解释一下, 还有1.4M的原因: 里面的代码包含了核心的js, 兼容式的代码等公用的相关代码. 这些我们就没必要去做提取了.

还有就是, 我们这里使用的是开发环境的模式, 其实有些代码是多出来的: 比如热加载, webpack-dev-server这些插件.

5. gzip压缩.

gzip压缩, 是目前常用到的压缩方式. 就单纯基于项目效果而言, 我们引入一个插件: compression-webpack-plugin, 来完成js文件的压缩.

安装该插件:

npm install --save-dev compression-webpack-plugin

然后引入相关代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const compress = new CompressionWebpackPlugin(
 {
 filename: info => {
 return `${info.path}.gz${info.query}`
 },
 algorithm: 'gzip', 
 threshold: 10240,
 test: new RegExp(
 '\\.(' +
 ['js'].join('|') +
 ')

), minRatio: 0.8, deleteOriginalAssets: false } ) module.exports = { css: { extract: true }, configureWebpack: { plugins: [compress] }, chainWebpack: config => { config.optimization.minimize(true); config.optimization.splitChunks({chunks: 'all'}) config.externals({ vue: 'Vue', vuex: 'Vuex', 'vue-router': "VueRouter", 'element-ui': "'element-ui'" }) } }

为了看效果, 这里我们只做js文件的gzip. 项目运行后会生成一个.gz的文件.

重新启动项目后, 是无法看到效果的. 因为没有将gz文件发送给浏览器解析. 我们需要配置下服务器. 我们这样做的目的, 是为了更好的了解到: gzip压缩后, 文件的压缩效果. 在这里我们还需要加入devServer的配置:

注意: 目前现在的应用服务器, 比如Nginx, apache等都是支持gzip压缩的. 如果架设到这样的服务器上, 是不需要通过这个插件来压缩.我们启用他们自身的gzip功能就可以了.

const compress = new CompressionWebpackPlugin(
 {
 filename: info => {
 return `${info.path}.gz${info.query}`
 },
 algorithm: 'gzip', 
 threshold: 10240,
 test: new RegExp( '\\.(' + ['js'].join('|') + )

四时宝库

程序员的知识宝库

vue-cli3 项目框架优化(OneLine周分享)