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 打包体积优化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
Javascript window对象详解
Nov 12 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
You might like
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
python代码能做成软件吗
2020/07/24 Python
Python字符串及文本模式方法详解
2020/09/10 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
七一表彰活动方案
2014/01/18 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
高中综合实践活动总结
2014/07/07 职场文书
高中校园广播稿
2014/10/21 职场文书
2015年信访工作总结
2015/04/07 职场文书
初三化学教学反思
2016/02/22 职场文书
辞职申请书范本
2019/05/20 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python