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 相关文章推荐
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL