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. laravel报错 : laravel Please provide a valid cache path

    这是因为laravel的缓存路径没有找到 laravel缓存文件路径是在 config/cache.php中设置,默认存在storage文件夹中 'file' => [ 'driver' =&g ...

  2. nginx 访问php文件报错

    问题图: An error occurred. 解决方法(windows版) php.cgi没有启动 cmd中找到cig.exe 的位置然后运行   php-cgi.exe -b 127.0.0.1: ...

  3. Mock平台3-初识Antd React 开箱即用中台前端框架

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 内容提要 首先说下为啥这次测试开发系列教程前端选择Antd React,其实也是纠结对比过最终决定挑战一把,想法大概有几下几点: 笔者自己 ...

  4. vue中使用js-cookie插件

    js-cookie是一个用于处理 cookie 的简单.轻量级 JavaScript API,官方文档:https://www.npmjs.com/package/js-cookie. 一.安装 np ...

  5. 安装ncclient出现rust版本不对问题解决

    在windows上安装ncclient的时候,出现了提示说rust版本需要至少1.14.0以上版本 解决办法: 在https://www.rust-lang.org/tools/install下载新版 ...

  6. rodert教你学FFmpeg实战这一篇就够了

    rodert教你学FFmpeg实战这一篇就够了 建议收藏,以备查阅 pdf阅读版: 链接:https://pan.baidu.com/s/11kIaq5V6A_pFX3yVoTUvzA 提取码:jav ...

  7. 导入导出笔记-easyExcel初探(表格导入和模板化导出)

    前言 本文使用的EasyExcel Alibaba和EasyPoi Apache技术栈分析 EasyExcel Dependency EasyPoi Dependency 1.需求一:表格化需求导入导 ...

  8. 6月29日学习总结 Django自带的用户认证

    Django自带的用户认证 我们在开发一个网站的时候,无可避免的要设计.实现网站的用户系统.此时我们需要实现包括但不限于用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. D ...

  9. 利用MSSQL getshell

    此次复现使用的sql server 2000 和sql server 2008两个环境进行的 是在已知数据库密码的基础上进行的 0x01 MSSQL连接 连接MSSQL 2000 新建连接: 填写目的 ...

  10. JVM的垃圾回收算法有哪些

    常用的垃圾回收算法有如下四种:标记-清除.复制.标记-整理和分代收集. 标记-清除算法从算法的名称上可以看出,这个算法分为两部分,标记和清除.首先标记出所有需要被回收的对象,然后在标记完成后统一回收掉 ...