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. 使用 AHK 在 VS Code 中根据上下文自动切换输入法状态

    平常在VS Code打公式,中英文切换一直狂点 Shift 手都快按断了,于是试图用 AutoHotKey 搞一些自动切换输入法程序,让它根据当前输入环境自动切输入法. 之前在网上搜到的是切换键盘的( ...

  2. [ Shell ] 两个 case 实现 GetOptions 效果

    https://www.cnblogs.com/yeungchie/ 可以用 getopt,但我还是喜欢自己写这个过程,便于我够控制更多细节. 下面要实现的效果是,从命令行参数中分析,给 $libNa ...

  3. 前面顺序表的补充(复杂度,未实现的算法,空间扩展)(基于c语言)

    0.对于顺序表中的n个元素,如果在下标i的位置之前插入一个元素,则需要将后面n-i个元素向后移动一位:如果是删除下标为i处的元素,则是则需要将后面n-i-1个元素向前移动一位.如果说在i的位置插入和删 ...

  4. 互联网前沿技术——01 找不到模块“lodash”

    检查安装 node --version 修改 安装:npm install 启动:grunt server 如果报错: 找不到模块"lodash" https://www.soin ...

  5. k8s遇到invalid type for io.k8s.api.core.v1.PodSpec.containers

    报错 error: error validating "taskcenter-v4-deployment.yaml": error validating data: Validat ...

  6. PMP之挣值管理(PV、EV、AC、SV、CV、SPI、CPI)的记忆方法

    挣值管理法中的PV.EV.AC.SV.CV.SPI.CPI这些英文简写相信把大家都搞得晕头转向的.在挣值管理法中,需要记忆理解的有三个参数:PV.AC.EV. PV:计划值,在即定时间点前计划完成活动 ...

  7. Pyinstaller打包Pytorch框架所遇到的问题

    目录 前言 基本流程 一.安装Pyinstaller 和 测试Hello World 二.打包整个项目,在本机上调试生成exe 三.在新电脑上测试 参考资料 前言   第一次尝试用Pyinstalle ...

  8. Flutter入门教程(一)Flutter简介

    这是Flutter系列第一篇文章,后续会持续更新Flutter相关知识,本篇就主要对于Flutter技术做一个简单的入门介绍 一.Flutter简介 Flutter是谷歌的移动UI框架,可以快速在iO ...

  9. 【推理引擎】从源码看ONNXRuntime的执行流程

    目录 前言 准备工作 构造 InferenceSession 对象 & 初始化 让模型 Run 总结 前言 在上一篇博客中:[推理引擎]ONNXRuntime 的架构设计,主要从文档上对ONN ...

  10. 从字符串某位置开始的递增串(dfs)注意for循环中下标的错误

    #include <iostream> #include <string> using namespace std; char res[50];int tag=1; void ...