详解vue-cli 3.0 build包太大导致首屏过长的解决方案

前言：最近用vue-cli 3.0 构建一个小型的工单管理系统，完工后build发现一个chunk-vendors包就达到985kb，加上其他一些资源文件，首页的下载总共大小快要2m。测试给的第一个反馈就是首屏慢慢慢慢慢！

根据首屏加载资源文件过大，进行一下优化：

1. 路由懒加载

结合vue的异步组件再结合webpack的代码分割，我们可以轻松的实现路由懒加载。

vue-cli 3.0 模式就使用了babel，我们需要添加 syntax-dynamic-import 插件，才能使 babel 可以正确地解析语法。

// 安装插件 syntax-dynamic-import
cnpm install --save-dev @babel/plugin-syntax-dynamic-import

// 修改babel.config.js
module.exports = {
 "presets": [
  "@vue/app"
 ],
 "plugins": [
  [
   "component",
   {
    "libraryname": "element-ui",
    "stylelibraryname": "theme-chalk"
   },
   "syntax-dynamic-import"
  ]
 ]
}

// 修改路由组件的加载（router/index.js）
{
 path: '/',
 name: 'home',
 component: resolve => require(['pages/home'], resolve)
}

使用了路由懒加载，已经把原来的chunk-vendors降到了789kb，但加载789kb还是太大。那继续优化

2. 服务器开启gzip

gzip是gnu zip的缩写，顾名思义是一种压缩技术。它将浏览器请求的文件先在服务器端进行压缩，然后传递给浏览器，浏览器解压之后再进行页面的解析工作。在服务端开启gzip支持后，我们前端需要提供资源压缩包。

通过compressionwebpackplugin插件build提供压缩

// 安装插件
cnpm i --save-dev compression-webpack-plugin

// 在vue-config.js 中加入
const compressionwebpackplugin = require('compression-webpack-plugin');
const productiongzipextensions = ['js', 'css'];
const isproduction = process.env.node_env === 'production';

.....
module.exports = {
....
 configurewebpack: config => {
  if (isproduction) {
   config.plugins.push(new compressionwebpackplugin({
    algorithm: 'gzip',
    test: new regexp('\\.(' + productiongzipextensions.join('|') + ')$'),
    threshold: 10240,
    minratio: 0.8
   }))
  }
 }
}

现在我们看一下build后的压缩包的大小，大概减少了三分之二

3. 启用cdn加速

用gzip已把文件的大小减少了三分之二了，加载速度从之前2.7秒多到现在的1.8秒多，但这个还是得不到满足。那我们就把那些不太可能改动的代码或者库分离出来，继续减小单个chunk-vendors，然后通过cdn加载进行加速加载资源。

// 修改vue.config.js 分离不常用代码库
module.exports = {
 configurewebpack: config => {
  if (isproduction) {
   config.externals = {
    'vue': 'vue',
    'vue-router': 'vuerouter',
    'moment': 'moment'
   }
  }
 }
}
// 在public文件夹的index.html 加载

<!-- cnd -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

现在再build后看下大小和访问速度：

cdn优化后.jpg

可以看到chunk-verdors 又减少了114kb，通过cdn加载整个文档速度已经接近1秒。

4. 修改uglifyoptions去除console来减少文件大小

// 安装uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev

// 修改vue.config.js
 configurewebpack: config => {
  if (isproduction) {
   .....
   config.plugins.push(
    new uglifyjsplugin({
     uglifyoptions: {
      compress: {
       warnings: false,
       drop_debugger: true,
       drop_console: true,
      },
     },
     sourcemap: false,
     parallel: true,
    })    
   )
  }
 }

如果代码中打了很log，这个优化还是有点效果的。

总结

首屏优化工作告一段落，通过以上四项的优化，已经很大的提升了首屏的加载速度。如果想再进一步优化还是空间的，例如从代码层面去减少代码量（代码复用率）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。