详解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,这个优化还是有点效果的。

总结

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

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

(0)

相关推荐

  • 浅谈Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli工具为例,使用 vue-router搭建SPA应用,UI框架选用 element-ui, ajax方案选用 axios, 并引入vuex,使用 vuex-router-sync将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit npm ins

  • vue-cli项目优化方法- 缩短首屏加载时间

    最近实习的项目需求上要求不多,就学了下项目优化,主要是首屏加载太慢. 大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件. 安装 npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下,然后npm run dev 的时候默认会在8888端口显示. const BundleAnalyzerPlugin = require('webpac

  • 浅谈vue首屏加载优化

    本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp

  • 浅谈VUE单页应用首屏加载速度优化方案

    单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 webpack开启gzip压缩 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口 使用CDN资源,减小服务器带宽压力 在index.html中引入cdn资源 ... <body> &

  • vue-cli 首屏加载优化问题

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js   类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Personal from '@/components/page/Personal' import Message from '@/components/personnal/

  • Vue项目使用CDN优化首屏加载问题

    前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法是,将引用的外部js.css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js.外

  • Vue服务端渲染实践之Web应用首屏耗时最优化方案

    随着各大前端框架的诞生和演变,SPA开始流行,单页面应用的优势在于可以不重新加载整个页面的情况下,通过ajax和服务器通信,实现整个Web应用拒不更新,带来了极致的用户体验.然而,对于需要SEO.追求极致的首屏性能的应用,前端渲染的SPA是糟糕的.好在Vue 2.0后是支持服务端渲染的,零零散散花费了两三周事件,通过改造现有项目,基本完成了在现有项目中实践了Vue服务端渲染. 关于Vue服务端渲染的原理.搭建,官方文档已经讲的比较详细了,因此,本文不是抄袭文档,而是文档的补充.特别是对于如何与现

  • vue项目首屏打开速度慢的解决方法

    最近接手了一个后台管理系统,技术栈主要是vue全家桶+elementui,老大打开测试环境页面的时候,说看到首页需要6秒钟,那如何进行优化呢? 首先我们需要安装webpack-bundle-analyzer // webpack.prod.conf.js if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlu

  • vuejs项目打包之后的首屏加载优化及打包之后出现的问题

    一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样: 1:打开webpack.base.conf.js module.exports = { externals: { 'vue': 'Vue', 'axios': 'axios', 'vuex': 'Vuex', 'vue-router': 'VueRout

  • Vue SPA单页应用首屏优化实践

    1.代码压缩(gzip) 如果你用的是nginx服务器,请修改配置文件(其他web server 类似):sudo nano /etc/nginx/nginx.conf 在Gzip Settings里加入: gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/x-javascript text/css application/xml text/j

随机推荐