首页
所有分类
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 相关文章推荐
奇妙的js
Sep 24 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
jquery replace方法去空格
May 08 jQuery
js实现拖拽上传图片功能
Aug 01 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
微信小程序如何使用云开发
May 17 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
解密(1) Mint UI(1) hmac(1) mt-swipe(1) 面向对象(3) 相对路径 (1) requests(1) openpyxl(1) 相对路径(1) hashlib(1)
You might like
ADODB类使用
2006/11/25 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
浅谈json_encode用法
2015/03/05 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
详解Vue.js 响应接口
2020/07/04 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
python urllib爬虫模块使用解析
2019/09/05 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Mistine官方海外旗舰店：泰国国民彩妆品牌
2016/12/28 全球购物
汉森批发：Hansen Wholesale
2018/05/24 全球购物
奥地利智能家居和智能生活网上商店：tink.at
2019/10/07 全球购物
大学生简单自荐信
2013/11/10 职场文书
应届生自我鉴定
2013/12/11 职场文书
市场营销调查计划书
2014/05/02 职场文书