首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue 打包体积优化方案小结

Posted in Javascript onMay 20, 2020

Vue-cli3 打包体积优化方案

前言:

公司项目完成后 ，打包完成后有1.18MB，其实感觉还行了，但是还可以有优化的地方，对于咱们有精益求精（有没有还是有点*数的）的精神下再去优化，可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小

npm install webpack-bundle-analyzer -save-dev

在vue.config.js中进行配置

module.exports = {
 chainWebpack: config => {
  config
  .plugin('webpack-bundle-analyzer')
  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
 }
}

执行npm run build 或者 npm run serve 会出现这花里胡哨的界面用来分析文件大小

Vue 打包体积优化方案小结

分析

还没进行优化前vendor~app.xxxx.js 有1.18MB，咱们可以查看各个bundle大小，针对性的进行优化

Vue 打包体积优化方案小结

优化

CDN加载

对于vue、vue-router、vuex、axios等都可以在生产环境用CDN加载

const externals = {
 'vue': 'Vue',
 'vue-router': 'VueRouter',
 'vuex': 'Vuex',
 'axios': 'axios'
}
const cdn = {
 css: [],
 js: [
 'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',
 'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
 'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
 'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
 ]
}

module.exports = {
 chainWebpack: config => {
  config
  .plugin('webpack-bundle-analyzer')
  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  config.plugin('html').tap(args => {
  if (process.env.NODE_ENV === 'production') {
  args[0].cdn = cdn
  }
  return args
 })
 },
configureWebpack: config => {
 if (process.env.NODE_ENV === 'production') {
  return {
   externals: externals,
  };
  }
 },
}

接着修改pubilc/index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.png" rel="external nofollow" >
 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
 <% } %>
 <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
 <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
 <% } %>
 <title>上海比户</title>
</head>
<body>
 <noscript>
 <strong></strong>
 </noscript>
 <div id="app"></div>
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
 <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 <% } %>
</body>
</html>

路由懒加载

当打包应用的时候，JavaScript包会变的特别大，影响页面加载，如果这时我们在访问路由的时候去加载该模块，那会变的十分高效，把静态引入方式改为动态引入方式

import ComponentA from '../page/components/ComponentA';
routeList = [
 {
  path: '/comA',
  component: ComponentA
 },
]

//改为
routeList = [
 {
  path: '/comA',
  component: () => import('../page/components/ComponentA')
 },
]

由于我的项目一开始就用了路由懒加载，所以在打包文件上看不出体积大小的变化，但是大概会有个300k的大小减少

在vue cli3中，我们还需要手动移除prefetch，Preload，因为在vue cli 官方文档上提到，可以去了解下，我这大致概括了下

就是当首屏加载的时候，会一次性下载完所以的路由文件，这会导致首屏的时候请求内容变多，首屏加载变慢，修改如下

module.exports = {
 chainWebpack: config => {
  config
  .plugin('webpack-bundle-analyzer')
  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  config.plugin('html').tap(args => {
  if (process.env.NODE_ENV === 'production') {
   args[0].cdn = cdn
  }
  return args
  })
  // 移除 prefetch 插件
  config.plugins.delete('prefetch')
  // 移除 preload 插件
  config.plugins.delete('preload');
 },
 configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
   return {
   externals: externals,
   };
  }
 },
}

element-ui 按需加载

看element-ui/lib 这个包就占了总包大小的三分之二，554k，总包也就700多k，所以如果把element-ui 按需加载，那就可以减少体积，按需加载这就不说了吧，都会~:stuck_out_tongue_closed_eyes:

但是需要在 babel.config.js文件中添加（vue cli3 中需要安装 babel-plugin-component）

module.exports = {
 presets: ['@vue/app'],

 //加上这~
 plugins: [
  [
  'component',
  {
   libraryName: 'element-ui',
   styleLibraryName: 'theme-chalk'
  }
  ]
 ]
};

gzip

安装 compression-webpack-plugin

nmp i compression-webpack-plugin -D

在vue.config.js中引入

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
 chainWebpack: config => {
  config
  .plugin('webpack-bundle-analyzer')
  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
   config.plugin('html').tap(args => {
   if (process.env.NODE_ENV === 'production') {
    args[0].cdn = cdn
   }
   return args
  })
  // 移除 prefetch 插件
  config.plugins.delete('prefetch')
  // 移除 preload 插件
  config.plugins.delete('preload');
  },
  configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
   return {
   externals: externals,
   plugins: [
    //gzip压缩
    new CompressionPlugin({
    test: /\.js?¨E92E.html|\.html?¨E92E.html|.\css/, //匹配文件名
    threshold: 10240, //对超过10k的数据压缩
    deleteOriginalAssets: false //不删除源文件
    })
   ],
   performance: {
    hints: false
   }
   };
  }
 },
}

可以在上面的图看到，进行gzip压缩后的文件最大的也只有140k了

但是还需要在服务端配置

scss文件引入

我们通常会把scss文件抽离出来，一些共用样式，主题等，然后会在每个需要的组件中引入会显得繁琐，我们可以借助scss-loader进行预处理

例如我们有 resetTable.scss 文件，可以在vue.config.js中引入

module.exports = {
 chainWebpack: config => {
  config
  .plugin('webpack-bundle-analyzer')
  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  config.plugin('html').tap(args => {
   if (process.env.NODE_ENV === 'production') {
   args[0].cdn = cdn
   }
   return args
  })
  // 移除 prefetch 插件
  config.plugins.delete('prefetch')
  // 移除 preload 插件
  config.plugins.delete('preload');
  },
 configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
   return {
   externals: externals,
   plugins: [
    //gzip压缩
    new CompressionPlugin({
    test: /\.js?¨E92E.html|\.html?¨E92E.html|.\css/, //匹配文件名
    threshold: 10240, //对超过10k的数据压缩
    deleteOriginalAssets: false //不删除源文件
    })
   ],
   performance: {
    hints: false
   }
  };
  }
 },
 // scss设置
 css: {
  loaderOptions: {
  sass: {
   //我是放在 assets/commcss 目录下
   data: '@import "@assets/commcss/resetTable.scss";'
  }
  },
 },
}

上面这图就是完整的vue.config.js配置啦~

总结：

​ 以上就是目前我在项目中优化的点，但肯定还有其他的优化地方，可以相互讨论

到此这篇关于Vue 打包体积优化方案小结的文章就介绍到这了,更多相关Vue 打包体积优化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

Vue 打包体积优化方案小结

- Author -

eg

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
vue实现输入框自动跳转功能
May 20 #Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 #Javascript
精读《Vue3.0 Function API》
May 20 #Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 #Javascript
Vue3 的响应式和以前有什么区别，Proxy 无敌？
May 20 #Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 #Javascript
vue模块移动组件的实现示例
May 20 #Javascript
L4X25T(1) ICF-SW7600GR(1) PHILIPS(3) 德劲1103(3) D1875(1) D1835(1) 德生PL330(2) 德生9700DX(1) 山进(2) 飞利浦(2)
You might like
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
ArrayList类（增强版）
2007/04/04 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python使用udp实现聊天器功能
2018/12/10 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python实现简单井字棋游戏
2020/03/04 Python
如何利用python进行时间序列分析
2020/08/04 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
html5 桌面提醒：Notifycations应用介绍
2012/11/27 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
AC Lens：购买隐形眼镜
2017/02/26 全球购物
实验教师岗位职责
2014/02/13 职场文书
售后服务质量承诺书
2015/04/29 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
webpack的移动端适配方案小结
2021/07/25 Javascript