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(右图)创建项目的目录 从上图可以 ...
随机推荐
- 使用 AHK 在 VS Code 中根据上下文自动切换输入法状态
平常在VS Code打公式,中英文切换一直狂点 Shift 手都快按断了,于是试图用 AutoHotKey 搞一些自动切换输入法程序,让它根据当前输入环境自动切输入法. 之前在网上搜到的是切换键盘的( ...
- [ Shell ] 两个 case 实现 GetOptions 效果
https://www.cnblogs.com/yeungchie/ 可以用 getopt,但我还是喜欢自己写这个过程,便于我够控制更多细节. 下面要实现的效果是,从命令行参数中分析,给 $libNa ...
- 前面顺序表的补充(复杂度,未实现的算法,空间扩展)(基于c语言)
0.对于顺序表中的n个元素,如果在下标i的位置之前插入一个元素,则需要将后面n-i个元素向后移动一位:如果是删除下标为i处的元素,则是则需要将后面n-i-1个元素向前移动一位.如果说在i的位置插入和删 ...
- 互联网前沿技术——01 找不到模块“lodash”
检查安装 node --version 修改 安装:npm install 启动:grunt server 如果报错: 找不到模块"lodash" https://www.soin ...
- k8s遇到invalid type for io.k8s.api.core.v1.PodSpec.containers
报错 error: error validating "taskcenter-v4-deployment.yaml": error validating data: Validat ...
- PMP之挣值管理(PV、EV、AC、SV、CV、SPI、CPI)的记忆方法
挣值管理法中的PV.EV.AC.SV.CV.SPI.CPI这些英文简写相信把大家都搞得晕头转向的.在挣值管理法中,需要记忆理解的有三个参数:PV.AC.EV. PV:计划值,在即定时间点前计划完成活动 ...
- Pyinstaller打包Pytorch框架所遇到的问题
目录 前言 基本流程 一.安装Pyinstaller 和 测试Hello World 二.打包整个项目,在本机上调试生成exe 三.在新电脑上测试 参考资料 前言 第一次尝试用Pyinstalle ...
- Flutter入门教程(一)Flutter简介
这是Flutter系列第一篇文章,后续会持续更新Flutter相关知识,本篇就主要对于Flutter技术做一个简单的入门介绍 一.Flutter简介 Flutter是谷歌的移动UI框架,可以快速在iO ...
- 【推理引擎】从源码看ONNXRuntime的执行流程
目录 前言 准备工作 构造 InferenceSession 对象 & 初始化 让模型 Run 总结 前言 在上一篇博客中:[推理引擎]ONNXRuntime 的架构设计,主要从文档上对ONN ...
- 从字符串某位置开始的递增串(dfs)注意for循环中下标的错误
#include <iostream> #include <string> using namespace std; char res[50];int tag=1; void ...