webpack优化moment.js的体积

简介: webpack优化moment.js的体积 https://juejin.cn/post/7101179948043337735

项目打包优化是一个常常被谈及的话题,就像很多面试官看到你简历介绍说有过项目打包优化的经历,便会对此展开提问,做过哪些优化。

回到本文,项目开发中会使用的到moment.js用于处理各种时间问题(只能说真香,太好用了)。可是一旦直接引入之后,不关注打包体积,页面加载性能的话,你可以自动忽略了(手动捂嘴)。但只要关注的话,你就会发现它的体积是真的大,通过可视化界面可以看出

优化前

优化前的体积.png

对于其中使用部分,我们也就是用到其中的一些函数,这些函数即使都写出来,也就是几KB。
这样引入之后增加了这么多体积便是不必要的。所以需要优化。

优化方案:IgnorePlugin

const webpack = require('webpack');
module.exports = {
//...其他配置
plugins: [ 
    // 忽略 moment.js的所有本地文件 
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
   ], 
 };

优化后

优化后的体积.png

前后对比发现体积少了很多,然后你有说,不还是很大嘛,但是有时候还是架不住香嘛不是嘛,不过凡事无绝对,还是要视项目而定,如果仅仅只用一两项的话,还是建议自己写比较好。减少代码体积,虽然吐过开机Gzip压缩的话,体积能打到17.3kb

结束语:关注我,少走弯路! 创作不宜,转载请注明出处!

image.png

相关文章
|
23天前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
18天前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
109 62
|
21天前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
14天前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
60 31
|
23天前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
23天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
27天前
|
缓存 JavaScript 前端开发
介绍一下 JavaScript 中数组方法的常见优化技巧
通过合理运用这些优化技巧,可以提高 JavaScript 中数组方法的执行效率,提升代码的整体性能。在实际开发中,需要根据具体的业务场景和数据特点选择合适的优化方法。
25 6
|
25天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
JSON 监控 JavaScript
Node.js-API 限流与日志优化
Node.js-API 限流与日志优化
|
1月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
49 6