vuecli中配置webpack加快打包速度
webpack4中webpack 的DllPlugin插件可以将常见的库文件作为dll文件来,每次打包的时候就不用再次打包库文件了。
但是游鱼西在vuecli中已经去除这个选项,意识到带来的打包速度提升并不明显;
dllplugin配置可以参看这篇文章:dllplugin;
这里带来新的hand source webpack plugin插件, 可以到npm安装下载
打包的时候配置在vue.config.js的plugin中,
configureWebpack: {
plugins:[
new HardSourceWebpackPlugin()
]
}
}
配置之后初次打包会觉得没什么差异,主要是会先写编译文件到磁盘中(相当于第一次做了一次缓存)
控制台会打印这些
[hardsource:2e2f9f88] Writing new cache 2e2f9f88...
[hardsource:a4fd9701] Writing new cache a4fd9701...
[hardsource:2e2f9f88] Tracking node dependencies with: package-lock.json, yarn.lock.
[hardsource:a4fd9701] Tracking node dependencies with: package-lock.json, yarn.lock.
再次运行项目 会打印这些
[hardsource:a4fd9701] Using 66 MB of disk space.
[hardsource:a4fd9701] Tracking node dependencies with: package-lock.json, yarn.lock.
[hardsource:a4fd9701] Reading from cache a4fd9701...
从我的磁盘中读取了66Mb的文件缓存;
从时间上来看,项目从20多秒的打包 变为了2秒左右,十倍的提升;性能显著


vuecli中配置webpack加快打包速度的更多相关文章
- vue-cli中配置屏幕自适应(px2rem)
在vue-cli中配置屏幕自适应的方法 首先,我们需要安装flexible库. npm i lib-flexible --save 在index.html文件当中配置meta标签, <meta ...
- Eclipse中配置Maven build打包
Eclipse中配置Maven build打包 clean package
- vue-cli 中的 webpack 配置详解
本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...
- vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题.segementfalut链接在这里 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2. ...
- webpack提高打包速度
通过使用插件和配置插件的参数. 1. 打包速度分析 首先通过speed-measure-webpack-plugin分析打包的各个插件和loader的耗时.然后具体问题,具体分析. 按照插件 npm ...
- vue-cli中配置vuex流程和注意事项
本文目录 vue-cli下新建站 配置路由更改HelloWorld.vue组件到新建Home.vue组件 安装vuex 测试是否安装成功vuex一:vue-cli下新建站 a)新建文件夹vuexStu ...
- 如何在Gulp中提高Browserify的打包速度
使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch ...
- create-react-app脚手架中配置webpack的方法
概述 create-react-app脚手架中的react-scripts能够(1)帮我们自动下载需要的webpack依赖:(2)自己写了一个nodejs服务端脚本代码:(3)使用express的Ht ...
- 在vue项目中配置webpack
首先我们来看一下使用Vue-cli2与Vue-cli2之后的版本(这里以Vue-cli4版本为例)创建项目目录结构的不同: Vue-cli2(左图)与Vue-cli4(右图)创建项目的目录 从上图可以 ...
随机推荐
- Ribbon&OpenFeign配置使用
目录 Ribbon 是什么 工作流程 怎么用 负载算法 官方提供算法 使用方法 自定义负载算法 在rule包下新建MyRule 修改自定义策略类RbRule 测试 OpenFeign 是什么 怎么用 ...
- docker基础命令和操作
前言 之前在部署个人网站的时候,需要打包maven,在生产环境,需要使用到docker去做服务器和端口的守护. 于是在查阅了相关资料,学习了docker一些基本命令行操作,包括对镜像的查看,修改和添加 ...
- myBatis plus 去除生成 controller
由于我在网上没有找到答案, 所以分享给大家学习, 我也是第一次用 mybtis plus 的新生成器生成代码, 所以基础代码都是在官网复制所得. 在这里也支持大家在解决不了问题时, 可以试着看看源 ...
- Fiddler抓取https协议的证书导入过程
fildder抓取https的设置以及证书导出 打开fiddler界面,选择左上角菜单栏Tools-Options 出现Options界面后,选择HTTPS选项卡 勾选上Capture HTTPS C ...
- Linux开机自启应用&开机执行脚本&监听端口应用挂掉了执行启动脚本
linux开机自启 背景 目前要部署一个spring boot框架的jar包,实现开机启动项目或者应用挂掉了 执行启动脚本 在root目录下有一个启动项目的脚本: app_start.sh app_s ...
- JavaWeb——Http
4.1.什么是http http(超文本传输协议)是一个简单的请求-响应协议,它通常运行在TCP之上. 文本:无链接 超文本:利用超链接将普通文本的信息组织在一起的超级文本 4.2.http两个时代的 ...
- winform 学习之qq邮箱正则验证及常用正则
这段时间一直再做winform相关的项目,记录了一些东西 qq邮箱正则表达式: 第一种:字母和数字组合邮箱判断 string str = "justin1107@qq.com"; ...
- BLHeli/ BLHeli_S开源无刷电调学习记录
BLHeli的历史轨迹:BLHeli -> BLHeli_S -> BLHeli_32,我们重点学习BLHeli_S版本. 该代码支持常规的1-2ms脉冲宽度输入,以及Oneshot125 ...
- 摆烂期的Android学习笔记一
Android大致分为四层架构1.Linux内核层:提供各种硬件驱动,如显示驱动,音频驱动,相机驱 动,蓝牙驱动.... 2.系统运行库层:通过C/c++库为android地图提供支持 3.应用框架层 ...
- HyBird App(混合应用)核心原理JSBridge
目录 app分类 HyBird App(混合应用) JSBridge介绍 优势及应用场景 JsBridge的核心 1.Web端调用Native端代码 1.1 拦截URL Schema 1.2 注入ap ...