webpack优化篇(四十二): 使用高版本的 webpack 和 Node.js

简介: webpack优化篇(四十二): 使用高版本的 webpack 和 Node.js

说明

玩转 webpack 学习笔记



使用 webpack 4

相比 webpack 3 构建时间降低了 60%-98%!

72c8eacb62f04ccda31621b3d9baa57b.png


使用 webpack4:优化原因


   V8 带来的优化(for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf)

   webpack4 默认使用更快的 md4 hash 算法

   webpacks AST 可以直接从 loader 传递给 AST,减少解析时间

   使用字符串方法替代正则表达式


具体的可以参考:https://github.com/webpack/webpack/releases,然后找到 v4.0.0

d826612ef1904eb7a7874907145ef8ea.png


map perfermance


map 速度提升对比

对比版本如下:这里需要使用 nvm 工具,可以参考我之前的文章:怎么使用 nvm 控制 nodejs 版本切换?

02e050f3d5ac4164ba7f4c01f019a3d3.png



"use strict";
const runCount = 100;
const keyCount = 10000;
let map = new Map();
let keys = new Array(keyCount);
for (let i = 0; i < keyCount; i++) keys[i] = {};
for (let key of keys) map.set(key, true);
let startTime = process.hrtime();
for (let i = 0; i < runCount; i++) {
    for (let key of keys) {
        let value = map.get(key);
        if (value !== true) throw new Error(); 
    }
}
let elapsed = process.hrtime(startTime);
console.log(elapsed)
let [seconds, nanoseconds] = elapsed;
let milliseconds = Math.round(seconds * 1e3 + nanoseconds);
console.log(`${process.version} ${milliseconds} ms`);


860e468fc71d4621a1ff88f0d515c29d.png

89c3ddf3029843a4b09b9979ed9bd2ec.png

182b246178844149b5eb7500eaca2c71.png



对比 includes 跟 indexOf

编写 compare-includes-indexof.js 文件

const ARR_SIZE = 1000000;
const hugeArr = new Array(ARR_SIZE).fill(1);
// includes
const includesTest = () => {
    const arrCopy = [];
    console.time("includes");
    let i = 0
    while (i < hugeArr.length) {
        arrCopy.includes(i++)
    }
    console.timeEnd("includes");
}
// indexof
const indexOfTest = () => {
    const arrCopy = [];
    console.time("indexOf");
    let i = 0
    for (let item of hugeArr) {
        arrCopy.indexOf(item)
    }
    console.timeEnd("indexOf");
}
includesTest();
indexOfTest();



575951c26a334de9a9e6149ce92c7002.png


目录
相关文章
|
2月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
2月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
128 62
|
9天前
Node安装版本低于工程版本时打包绕过校验
在开发中,若本地Node版本低于项目配置要求,导致打包报错(如图所示),可在不变更本地环境的情况下,通过在执行`npm run build`前输入命令`set NODE_OPTIONS=--openssl-legacy-provider`来绕行此问题,确保构建顺利进行。
32 10
|
2月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
77 31
|
2月前
|
JSON 监控 JavaScript
Node.js-API 限流与日志优化
Node.js-API 限流与日志优化
|
2月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
66 6
|
2月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
80 7
|
3月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
59 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
2月前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
64 2
|
3月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
109 4