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(右图)创建项目的目录 从上图可以 ...
随机推荐
- quartz框架(七)-JobStore
JobStore 在之前的博文中,博主已经写了关于Job的相关内容.本篇博文,博主将介绍JobStore相关的内容. JobStore是存放Job和Trigger的地方.当我们调用Scheduler对 ...
- laravel 终端命令
创建模块及控制器
- 线程的sleep()方法和yield()方法有什么区别?
sleep()方法和yield()方法的区别: sleep()方法给其他线程运行机会时,不考虑线程的优先级,因此会给低优先级的线程运行机会:yield()方法只会给相同优先级或更高优先级的线程运行机会 ...
- vue3-关于$props,$parents等引用元素和组件的注意事项
同一个组件内可以使用,但是在不同的组件内,不要用$parents或$refs来访问另一个组件内的数据, 这会使代码的耦合性变高,同时也会让代码的可读性变差, 在不同组件访问数据时,使用props等来传 ...
- 『现学现忘』Docker基础 — 27、Docker镜像的commit操作
目录 1.commit命令作用 2.commit命令说明 3.示例演示 1.commit命令作用 在运行的容器中,并在镜像的基础上做了一些修改,我们希望保存起来,封装成一个新的镜像,方便我们以后使用, ...
- 远程控制Windows2003下安装Pcanywhere导致Awgina.dll出错的解决办法
远程控制的时候出现的问题引用 症状启动计算机时,"欢迎使用 Windows"登录屏幕不出现.您还可能会看到与下面的某条信息类似的错误信息: ? 一个最近安装的程序使欢迎屏幕和快速用 ...
- Linux kernel cfg80211_mgd_wext_giwessid缓冲区溢出漏洞
受影响系统:Linux kernel <= 5.3.2描述:CVE(CAN) ID: CVE-2019-17133 Linux kernel是开源操作系统Linux所使用的内核. Linux k ...
- Centos 7.5 通过yum安装GNOME Desktop时出现:file /boot/efi/EFI/centos from install of fwupdate-efi-12-5.el7.centos.x86_64 conflicts with file from package grub2-common-1:2.02-0.65.el7.centos.2.noarch
系统版本为: [root@s10 ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) 由于管理kvm虚拟机的需求,需要安装 ...
- RabbitMQ Go客户端教程4——路由
本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第四篇--路由. 这些教程涵盖了使用RabbitMQ创建消息传递应用程 ...
- vue学习过程总结(01)- 开发环境的搭建
1.本地vue开发环境的搭建 1.1.下载NodeJs.下载地址:https://nodejs.org/en/download/ node.js的相关结束以及教程:https://www.runoob ...