阅读 2135

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

Vue项目优化的背景

项目是通过vue-cli3 来构建的, 项目随着需求的不断增加. 代码量也在随着增大. 项目的文件大小也随着增加. 但是这一情况就变得,异常棘手. 我们也需要找到解决办法, 来处理这件事情, 来提高项目的运行效率. 在考虑优化之前, 我们来看下在之前项目的结构中, 我们需要做什么样的优化方式.

以往项目的优化

在以往的项目中, 我们的代码基本都是通过服务端渲染方式来响应给用户. 在这种项目结构中. 代码的情况, 都是由开发人员控制, 按照自己的需要引入相关的代码库. 代码的控制基本都是按照团队规范来处理. 所以在页面引入的代码都是当前页面需要的执行代码. 代码的优化, 主要表现在:

  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 = {

}
复制代码

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

项目优化前的文件情况
单个文件已经到了8.5m, 这个是非常可怕的. 所以我们必须要做相关的优化, 减少文件的大小.

  1. 最小化处理: 代码的最优化, 我们会通过chainWebpak来处理. 这里使用的是webpack配置中的optimization来处理的. 我们在优化前, 看下相关文件的响应代码: 看下app.js文件的返回代码:

app.js
app.js代码是没有做任何的优化. 所以这也是我们需要做的优化. 所以我们需要最小化这个代码

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

然后我们运行我们的项目, 可以看到代码的方式.

代码已经减少到8.4M, 然后看到的源码也是压缩的了. 其他的文件大小也是相应的减少了. 这个大家可以看看自己的项目文件情况.

  1. 分割代码 分割代码是, 将某一些相关的文件放入到相应的文件中. 我们先设置一下.
module.exports = {
    
    chainWebpack: config => {
        config.optimization.minimize(true);
        config.optimization.splitChunks({
          chunks: 'all'
        })
    }
}
复制代码

这时候我们的代码文件分割了出来, 单个文件最大变成了7.4M, 单个文件的加载速度肯定是有所提升的. 当然我们还可以继续设置splitChunks的参数配置, 但是我这里就不带大家去设置了. 大家可以参考splitChunks插件的配置. 可以设置最小文件大小, 最大文件大小, 设置异步方式, 还有模块的缓存设置, 名称的设置等等. 但是一定要平衡文件大小的和分割出来的文件数量的平衡, 数量多了, 请求也会变慢的, 影响性能. 不过大家可以详细去设置一下, 看下效果, 来设置符合自己的项目参数. 我这里的话, 就只设置成这样. 避免文件数量的增加了. 当然是可以继续优化的. 我们通过其他方式来减少文件的大小.

  1. 提取公用代码, 使用免费的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页面加入这些链接. 然后我们运行效果看下.

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

有没有发现, 我们的请求中没有看到css的请求. 那是因为css代码都是放在了js文件中, 他会在执行js的时候, 会动态的将css代码生成style标签. 所以会将css代码放在js中. 这也是一个造成文件过大的原因之一. 这时候我们需要提取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文件出来, 那就是element-ui的样式文件, 我们现在用的是本地引入element-ui的样式, 我们也改为免费资源的形式

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

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

注意到的是我们这里还有2.3M的大文件. 我这里我们是必须继续优化的. 这里文件大的原因. 我们还引入了vue-codemirror这个组件, 我们也可以通过使用免费资源解决. 配置方式跟vue, vuex, vue-router这种方式配置,我们就不在累赘说明. 这个组件用到了codemirror的样式. 也需要引入进来. 最后的效果.

已经是压缩到1.4M了. 经过上面的步骤, 效果还是比较明显的. 因为我们这里使用的是开发环境的模式, 其实有些代码是多出来的, 但这个环境下也是必须的.比如热加载, webpack-dev-server这些插件.

  1. 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文件让浏览器看到. 这时候, 我们需要配置下服务器. 目前现在的应用服务器, 比如Nginx, apache等都是支持gzip压缩的. 如果架设到这样的服务器上, 是不需要通过这个插件来压缩. 我们启用他们自身的gzip功能就可以了. 我们这样做的目的, 是为了更好的了解到gzip后, 文件的压缩效果. 在这里我们还需要加入devServer的配置:

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 = {
  devServer: {

    before(app, server) { 
      app.get(/.*.(js)$/, (req, res, next) => { 
        req.url = req.url + '.gz';
        res.set('Content-Encoding', 'gzip');
        next();
      })
    }
     
    // compress: true
  },
  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'",
        "vue-codemirror": "'vue-codemirror'"
    })

 
  }
}

复制代码

然后重新启动项目, 这时候你就会发现我们的Js文件已经压缩了, 从1.4M的文件到300多k. 效果是很明显的.

整体的优化, 我们现在已经基本的完成. 更多的细节式优化, 有待大家去发掘. 注意: gzip压缩里devServer可以直接设置成 **compress: true **就可以实现效果, 不必要去加入这个压缩创建, 也不需要自己去重新修改请求方式.

优化思考

从对vue-cli3项目框架来说, 他基本是基于webpack做的再次封装, 所以我们最主要的还是得了解webpack的相关优化配置, 来完成我们对项目的优化. 现在的插件越来越多, 但是最本质的优化方式, 还是不变. 跟以前项目优化方式是异曲同工的. 更多的细节化的操作, 大家可以继续研究. 希望对你们有所帮助. 有问题的地方, 欢迎大家指出.

附件: vue-cli3 项目框架优化 视频分享下载地址: https://pan.baidu.com/s/1q2ELgOrikuiwqjg2IfXk-g 密匙: qx1q

文章转载请联系我们(One Line Team)

关注下面的标签,发现更多相似文章
评论