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. 接口自动化测试框架(Java 实现)

    目录 需求分析 开发设计 分层与抽象 技术选型 主要类设计 测试文件设计 工程目录设计 工程实现 github 地址 运行示例 需求分析 需求点 需求分析 通过 yaml 配置接口操作和用例 后续新增 ...

  2. cobbler check执行报错

    httpd does not appear to be running and proxying cobbler, or SELinux is in the way. 当执行cobbler check ...

  3. Laravel7-验证器使用

  4. WPF之VisualTreeHelper

     /// <summary>        /// </summary>        /// <typeparam name="T">< ...

  5. centos7升级openssh8.7&openssl1.1.1l脚本

    脚本下载地址或首页联系本人获取 https://files.cnblogs.com/files/blogs/705493/update_ssh.sh 需搭配openssh8.7和openssl1.1. ...

  6. 7月2日 Django 生成验证码、

    html页面里 {# 验证码 #} <div class="form-group " id="v-code-wrapper"> <label ...

  7. HTTP发展史,HTTP1.1与HTTP2.0的区别

    前言 我们知道HTTP是浏览器中最重要且使用最多的协议,它不仅是浏览器与服务端的通信语言,更是互联网的基石.随着浏览器的不断更新迭代,HTTP为了适应技术的更新也在不断进化,学习HTTP的最佳途径就是 ...

  8. MySQL JDBC常用知识,封装工具类,时区问题配置,SQL注入问题

    JDBC JDBC介绍 Sun公司为了简化开发人员的(对数据库的统一)操作,提供了(Java操作数据库的)规范,俗称JDBC,这些规范的由具体由具体的厂商去做 对于开发人员来说,我们只需要掌握JDBC ...

  9. 构造器注入和 setter 依赖注入,那种方式更好?

    每种方式都有它的缺点和优点.构造器注入保证所有的注入都被初始化,但是 setter 注入提供更好的灵活性来设置可选依赖.如果使用 XML 来描述依赖, Setter 注入的可读写会更强.经验法则是强制 ...

  10. Java 有没有 goto?

    goto 是 Java 中的保留字,在目前版本的 Java 中没有使用.(根据 James Gosling (Java 之父)编写的<The Java Programming Language& ...