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

时间 2019-11-06

标签 vue cli3 cli 项目框架优化 oneline 分享繁體版

原文原文链接

Vue项目优化的背景

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

以往项目的优化

在以往的项目中, 咱们的代码基本都是经过服务端渲染方式来响应给用户. 在这种项目结构中. 代码的状况, 都是由开发人员控制, 按照本身的须要引入相关的代码库. 代码的控制基本都是按照团队规范来处理. 因此在页面引入的代码都是当前页面须要的执行代码. 代码的优化, 主要表如今:css

js,css代码公用代码提取, 按照须要引入
js,css代码的最小化压缩
图片文件的压缩
gzip的压缩

等等.相关的优化. 这里咱们就不考虑其余性能的处理. 性能的处理最主要仍是就项目的状况来处理. 离开项目的性能优化, 其实都是没有说服力. 由于不一样项目, 在性能优化上是不同的, 好比某个性能优化方案在这个项目适合, 可是在另一个项目可能就不适合了.html

Vue-cli3的优化

vue-cli3主要仍是创建在webpack和webpack-dev之上的. 因此重点优化,也应该是经过学习webpack相关的配置功能来优化咱们的代码. 在vue-cli3中有两种方式来配置webpack. 两种方式: chainWebpack 和configureWebpack. chainWebpack的方式能够查看官方教程. configureWebpack的话直接看webpack的官方教程. 再配合看vue-cli3的官方文档, 咱们开始进一步的思考实际的优化方式.咱们新建一个vue.config.js文件vue

module.exports = {

}
复制代码

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

单个文件已经到了8.5m, 这个是很是可怕的. 因此咱们必需要作相关的优化, 减小文件的大小.

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

app.js代码是没有作任何的优化. 因此这也是咱们须要作的优化. 因此咱们须要最小化这个代码

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

而后咱们运行咱们的项目, 能够看到代码的方式.webpack

代码已经减小到8.4M, 而后看到的源码也是压缩的了. 其余的文件大小也是相应的减小了. 这个你们能够看看本身的项目文件状况.

分割代码分割代码是, 将某一些相关的文件放入到相应的文件中. 咱们先设置一下.

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

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

提取公用代码, 使用免费的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参数来忽略咱们这些模块的打包. 而后咱们从新运行项目, 看看效果.git

咱们的代码已经减小到2.8M. 可是这里有个问题, 就是咱们的代码没有执行起来, 报错了. 由于咱们须要将vue, vuex, vue-router等引入到项目界面中.咱们须要对html作一下处理. 这里咱们就引入网络上的免费资源了, 就不下载代码放到项目中了.github

在index.html页面加入这些连接. 而后咱们运行效果看下.web

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

有没有发现, 咱们的请求中没有看到css的请求. 那是由于css代码都是放在了js文件中, 他会在执行js的时候, 会动态的将css代码生成style标签. 因此会将css代码放在js中. 这也是一个形成文件过大的缘由之一. 这时候咱们须要提取css代码到文件. 这里咱们只须要将css配置一下:vue-router

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这些插件.

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)