webpack4中webpack 的DllPlugin插件可以将常见的库文件作为dll文件来,每次打包的时候就不用再次打包库文件了。

但是游鱼西在vuecli中已经去除这个选项,意识到带来的打包速度提升并不明显;

dllplugin配置可以参看这篇文章:dllplugin;

这里带来新的hand source webpack plugin插件, 可以到npm安装下载

打包的时候配置在vue.config.js的plugin中,


module.exports = {
 
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加快打包速度的更多相关文章

  1. vue-cli中配置屏幕自适应(px2rem)

    在vue-cli中配置屏幕自适应的方法 首先,我们需要安装flexible库. npm i lib-flexible --save 在index.html文件当中配置meta标签, <meta ...

  2. Eclipse中配置Maven build打包

    Eclipse中配置Maven build打包 clean package

  3. vue-cli 中的 webpack 配置详解

    本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...

  4. vue-cli中的webpack配置

    编辑模式下显示正常,打开的时候不知道为啥排版有问题.segementfalut链接在这里 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2. ...

  5. webpack提高打包速度

    通过使用插件和配置插件的参数. 1. 打包速度分析 首先通过speed-measure-webpack-plugin分析打包的各个插件和loader的耗时.然后具体问题,具体分析. 按照插件 npm ...

  6. vue-cli中配置vuex流程和注意事项

    本文目录 vue-cli下新建站 配置路由更改HelloWorld.vue组件到新建Home.vue组件 安装vuex 测试是否安装成功vuex一:vue-cli下新建站 a)新建文件夹vuexStu ...

  7. 如何在Gulp中提高Browserify的打包速度

    使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch ...

  8. create-react-app脚手架中配置webpack的方法

    概述 create-react-app脚手架中的react-scripts能够(1)帮我们自动下载需要的webpack依赖:(2)自己写了一个nodejs服务端脚本代码:(3)使用express的Ht ...

  9. 在vue项目中配置webpack

    首先我们来看一下使用Vue-cli2与Vue-cli2之后的版本(这里以Vue-cli4版本为例)创建项目目录结构的不同: Vue-cli2(左图)与Vue-cli4(右图)创建项目的目录 从上图可以 ...

随机推荐

  1. quartz框架(七)-JobStore

    JobStore 在之前的博文中,博主已经写了关于Job的相关内容.本篇博文,博主将介绍JobStore相关的内容. JobStore是存放Job和Trigger的地方.当我们调用Scheduler对 ...

  2. laravel 终端命令

    创建模块及控制器

  3. 线程的sleep()方法和yield()方法有什么区别?

    sleep()方法和yield()方法的区别: sleep()方法给其他线程运行机会时,不考虑线程的优先级,因此会给低优先级的线程运行机会:yield()方法只会给相同优先级或更高优先级的线程运行机会 ...

  4. vue3-关于$props,$parents等引用元素和组件的注意事项

    同一个组件内可以使用,但是在不同的组件内,不要用$parents或$refs来访问另一个组件内的数据, 这会使代码的耦合性变高,同时也会让代码的可读性变差, 在不同组件访问数据时,使用props等来传 ...

  5. 『现学现忘』Docker基础 — 27、Docker镜像的commit操作

    目录 1.commit命令作用 2.commit命令说明 3.示例演示 1.commit命令作用 在运行的容器中,并在镜像的基础上做了一些修改,我们希望保存起来,封装成一个新的镜像,方便我们以后使用, ...

  6. 远程控制Windows2003下安装Pcanywhere导致Awgina.dll出错的解决办法

    远程控制的时候出现的问题引用 症状启动计算机时,"欢迎使用 Windows"登录屏幕不出现.您还可能会看到与下面的某条信息类似的错误信息: ? 一个最近安装的程序使欢迎屏幕和快速用 ...

  7. Linux kernel cfg80211_mgd_wext_giwessid缓冲区溢出漏洞

    受影响系统:Linux kernel <= 5.3.2描述:CVE(CAN) ID: CVE-2019-17133 Linux kernel是开源操作系统Linux所使用的内核. Linux k ...

  8. 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虚拟机的需求,需要安装 ...

  9. RabbitMQ Go客户端教程4——路由

    本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第四篇--路由. 这些教程涵盖了使用RabbitMQ创建消息传递应用程 ...

  10. vue学习过程总结(01)- 开发环境的搭建

    1.本地vue开发环境的搭建 1.1.下载NodeJs.下载地址:https://nodejs.org/en/download/ node.js的相关结束以及教程:https://www.runoob ...