即刻起,加速您的前端构建
本文由云+社区发表
作者:志航
构建
影响前端发布速度的有两个方面,一个是构建,一个就是压缩,把这两个东西优化起来,可以减少很多发布的时间。
thread-loader
thread-loader 会将您的 loader
放置在一个 worker 池里面运行,以达到多线程构建。
把这个 loader 放置在其他 loader 之前(如下图 example 的位置), 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。
Install
$ npm install --save-dev thread-loader
复制代码
用法 和 exmaple
// webpack.config.js
module.exports = {module: {rules: [{test: /\.js$/,include: path.resolve("src"),use: ["thread-loader",// 你的高开销的loader放置在此 (e.g babel-loader)]}]}
复制代码
每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。请在高开销的loader中使用,否则效果不佳
更多配置请查看: github.com/webpack-con…
happypack
happypack,通过多进程模型,来加速代码构建。从 github 的 starts 数量来看,happypack 使用的人数比较多,比较受欢迎。
原理
相关的技术原理这里不再累赘,可以查看淘宝FED的相关文章 happypack 原理解析
用法和example
var HappyPack = require('happypack');
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });// ... 省略其余配置
module: {loaders: [{test: /\.less$/,loader: ExtractTextPlugin.extract('style',path.resolve(__dirname, './node_modules', 'happypack/loader') + '?id=less')}]},plugins: [new HappyPack({id: 'less',loaders: ['css!less'],threadPool: happyThreadPool,cache: true,verbose: true})]
复制代码
构建方法总结
从实际使用的情况来看,thread-loader 和 happypack 对于小型项目来说打包速度几乎没有影响,是因为它本身的额外开销,例如I/O,建议只在大型项目中使用,可以先测试再投入生产环境。
压缩
不推荐使用 webpack-parallel-uglify-plugin
项目基本处于没人维护的阶段,issue 没人处理,pr没人合并。
推荐使用 terser-webpack-plugin
terser-webpack-plugin 是一个使用 terser 压缩js的webpack 插件。
压缩是发布前处理最耗时间的一个步骤,如果是你是在webpack 4 中,只要几行代码,即可加速你的构建发布速度。
用法和 example
const TerserPlugin = require('terser-webpack-plugin');module.exports = {optimization: {minimizer: [new TerserPlugin(parallel: true // 多线程)],},
};
复制代码
更多用法请查看上面链接。
总结
随着 webpack 4 的优化,构建速度其实得到了极大的提升,也收到了parcel 等零配置Web应用打包工具的启发,其实 webpack 的配置日趋简洁,何不尝试配置一下呢?
此文已由腾讯云+社区在各渠道发布
获取更多新鲜技术干货,可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号
转载于:https://juejin.im/post/5c89cc085188257afe2d8025
即刻起,加速您的前端构建相关推荐
- 55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
- npm run buil构建后页面白屏_从Npm Script到Webpack,6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比 小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
- 前端构建工具gulpjs的使用介绍及技巧 (转)
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
阅读目录 理想的前端开发流程 Gulp 为何物 webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在 ...
- “流式”前端构建工具——gulp.js 简介
Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...
- 时下最流行前端构建工具Webpack 入门总结
作者:wenjuanrao,腾讯 PCG 前端开发工程师 最近梳理了下以前 webpack 的相关开发经验,整理和总结了一份入门笔记,欢迎大家围观和批评指正. 随着 web 应用越来越复杂和庞大,前端 ...
- 前端构建新世代,Esbuild 原来还能这么玩!
大家好,我是若川.持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- [转]前端构建工具gulpjs的使用介绍及技巧
本文转自:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
最新文章
- Linux驱动之LCD驱动编写
- python 在windows 中文显示
- 我的设计模型之简单工厂
- Linux 下 ps 命令的使用详解
- 【11GR2 RAC】如何开启归档和FLASHBACK
- Spring boot (6)---SpringMVC框架和spring Boot的区别
- Jetty9下生成Jetty使用的OBF格式的keystore密码
- Windows10安装IIS服务器
- 伺服速度控制模式接线图_伺服驱动器三种控制模式的接线
- Xshell6 安装包下载
- [定理证明]正态随机过程又是马尔科夫过程的充要条件(高斯-马尔科夫过程的充要条件)...
- UVa-11137 Ingenuous Cubrency
- Android自定义控件的步骤
- Android工具类篇 清理APP应用缓存
- 无刷直流电机学习笔记1
- plc和c语言和cnc,CNC是什么意思? CNC 和 PLC的区别?
- VMware下载安装、虚拟机创建、CentOS8镜像下载配置的具体步骤
- 【转】PCB布线技巧
- UE4 材质学习 (02-利用UV来调整纹理)
- English Learning - Day3 作业打卡 2022.12.9 周五