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 相关文章推荐
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
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
晶体管单管来复再生式收音机
2021/03/02 无线电
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
python+requests接口自动化框架的实现
2020/08/31 Python
flask项目集成swagger的方法
2020/12/09 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
阿德的梦教学反思
2014/02/06 职场文书
工作会议主持词
2014/03/17 职场文书
美术指导求职信
2014/03/17 职场文书
母校寄语大全
2014/04/10 职场文书
合作协议书格式
2014/08/19 职场文书
党员个人整改措施
2014/10/24 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
采购员工作总结范文
2015/08/12 职场文书