Vue 实现CLI 3.0 + momentjs + lodash打包时优化


Posted in Javascript onNovember 13, 2019

在vue-cli 2.0时代,webpack的配置是有独立文件的,包含在build目录下,修改也比较方便

到vue-cli 3.0后,webpack配置被整合到vue-cli的配置中了,需要配置一些打包插件比较麻烦了,比如优化momentjs压缩包,使用webpack-bundle-analyzer等…

研究后发现vue-cli 3.0使用了chainWebpack来支持额外的插件配置,其实和2.0是差不多的

我们这里使用momentjs,lodash和webpack-bundle-analyzer来演示如何配置chainWebpack

安装依赖

chainWebpack已经默认包含在vue-cli中了,无需安装

只需安装webpack-bundle-analyzer和momentjs,lodash,我用的是yarn,所以

yarn add momentjs
yarn add webpack-bundle-analyzer lodash-webpack-plugin --dev //优化要用到的插件

创建vue.config.js

在根目录下创建vue.config.js

vue.config.js

var webpack = require('webpack') //引入webpack库
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //引入webpack-bundle-analyzer

module.exports = {
  chainWebpack: config => {
    config.plugin('ignore')
      .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));//忽略/moment/locale下的所有文件
    config.plugin('analyzer')
      .use(new BundleAnalyzerPlugin())//使用webpack-bundle-analyzer 生成报表
    config.plugin("loadshReplace")
     .use(new LodashModuleReplacementPlugin());//优化lodash
  }
}

编译

通过yarn run build 编译并生成报表,图比较老,用的其他项目里面没有lodash

压缩前

Vue 实现CLI 3.0 + momentjs + lodash打包时优化

压缩后

Vue 实现CLI 3.0 + momentjs + lodash打包时优化

参考

webpack 修改插件选项

webpack-chain

以上这篇Vue 实现CLI 3.0 + momentjs + lodash打包时优化就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 #Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 #Javascript
vue 解除鼠标的监听事件的方法
Nov 13 #Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 #Javascript
element实现合并单元格通用方法
Nov 13 #Javascript
vue之debounce属性被移除及处理详解
Nov 13 #Javascript
Vue的click事件防抖和节流处理详解
Nov 13 #Javascript
You might like
社区(php&&mysql)三
2006/10/09 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Vue实现简易购物车页面
2020/12/30 Vue.js
python 实现A*算法的示例代码
2018/08/13 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
基于opencv实现简单画板功能
2020/08/02 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
学期自我鉴定
2013/11/04 职场文书
学生励志演讲稿
2014/01/06 职场文书
银行办理业务介绍信
2014/01/18 职场文书
大学生党员自我批评
2014/02/14 职场文书
家长会演讲稿
2014/04/26 职场文书
关于建议书的格式范文
2014/05/20 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js