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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
JS中操作JSON总结
Dec 06 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
实例浅析js的this
Dec 11 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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编程中数组的指针的使用
2015/11/30 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
用于table内容排序
2006/07/21 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
JS实现放烟花效果
2020/03/10 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python异常处理操作实例详解
2018/08/28 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
应届电子商务毕业自荐书范文
2014/02/11 职场文书
担保书格式及范文
2014/04/01 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
委托书格式范文
2015/01/28 职场文书
中秋节祝酒词
2015/08/12 职场文书