摘要:会将您的放置在一个池里面运行,以达到多线程构建。请在高开销的中使用,否则效果不佳更多配置请查看,通过多进程模型,来加速代码构建。压缩是发布前处理最耗时间的一个步骤,如果是你是在中,只要几行代码,即可加速你的构建发布速度。
本文由云+社区发表构建作者:志航
影响前端发布速度的有两个方面,一个是构建,一个就是压缩,把这两个东西优化起来,可以减少很多发布的时间。
thread-loaderthread-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中使用,否则效果不佳
更多配置请查看: https://github.com/webpack-co...
happypackhappypack,通过多进程模型,来加速代码构建。从 github 的 starts 数量来看,happypack 使用的人数比较多,比较受欢迎。
原理相关的技术原理这里不再累赘,可以查看淘宝FED的相关文章 happypack 原理解析
用法和examplevar 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-pluginterser-webpack-plugin 是一个使用 terser 压缩js的webpack 插件。
压缩是发布前处理最耗时间的一个步骤,如果是你是在webpack 4 中,只要几行代码,即可加速你的构建发布速度。
用法和 exampleconst TerserPlugin = require("terser-webpack-plugin"); module.exports = { optimization: { minimizer: [new TerserPlugin( parallel: true // 多线程 )], }, };
更多用法请查看上面链接。
总结随着 webpack 4 的优化,构建速度其实得到了极大的提升,也收到了parcel 等零配置Web应用打包工具的启发,其实 webpack 的配置日趋简洁,何不尝试配置一下呢?
此文已由腾讯云+社区在各渠道发布
获取更多新鲜技术干货,可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53859.html
摘要:会将您的放置在一个池里面运行,以达到多线程构建。请在高开销的中使用,否则效果不佳更多配置请查看,通过多进程模型,来加速代码构建。压缩是发布前处理最耗时间的一个步骤,如果是你是在中,只要几行代码,即可加速你的构建发布速度。 本文由云+社区发表作者:志航 构建 影响前端发布速度的有两个方面,一个是构建,一个就是压缩,把这两个东西优化起来,可以减少很多发布的时间。 thread-loade...
摘要:快杰云主机发布款全新机型在去年大会上,云主机团队推出了万网络性能万存储性能的快杰云主机。但同时价格则与上一代快杰持平,升频不加价。其中在的跑分中,快杰与上代快杰相比算力提升。除了上述三款性能主机外,上还发布了采用处理器的快杰型预览版。10月23日以构建·创见|为主题的UCloud用户大会暨Think in Cloud 2020(以下简称TIC)在上海召开。在本次大会上,UCloud推出了历经...
2013年,你是甲方,我是乙方,我为你云适配。 2014年,我的地盘你做主,云适配攻城狮们的工作阵地将全权授权给你,你可以自由的 DIY 您的网站,No more time,No Money,只要1天,只要1个人,只要2步,云适配开放平台一站搞定,您的跨屏网站即刻诞生了!!! BUT,BUT,BUT,在你开始完全做主前,我们想邀请您来参与云适配开放平台的内测,只要您具备最基础的前端开发技术,拥有一...
2013年,你是甲方,我是乙方,我为你云适配。 2014年,我的地盘你做主,云适配攻城狮们的工作阵地将全权授权给你,你可以自由的 DIY 您的网站,No more time,No Money,只要1天,只要1个人,只要2步,云适配开放平台一站搞定,您的跨屏网站即刻诞生了!!! BUT,BUT,BUT,在你开始完全做主前,我们想邀请您来参与云适配开放平台的内测,只要您具备最基础的前端开发技术,拥有一...
阅读 4234·2021-09-22 14:57
阅读 530·2019-08-30 15:56
阅读 2602·2019-08-30 15:53
阅读 2187·2019-08-29 14:15
阅读 1642·2019-08-28 17:54
阅读 520·2019-08-26 13:37
阅读 3412·2019-08-26 10:57
阅读 1015·2019-08-26 10:32