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

相关文章
|
2月前
|
缓存 编解码 JavaScript
在JavaScript小游戏开发中,如何优化游戏性能,比如减少重绘、提高动画流畅度?
提升JavaScript游戏性能的关键点包括:使用requestAnimationFrame优化动画流畅度;减少DOM操作,利用DocumentFragment或虚拟DOM;使用Canvas/WebGL高效渲染;优化图像资源,压缩图片和使用雪碧图;分层渲染与视口裁剪减少无效绘制;借助Web Workers进行后台计算;缓存计算结果;合理添加事件监听器并采用事件委托;定期进行性能分析以找到并解决瓶颈。不断测试与调整是优化的关键。
25 4
|
3月前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
7天前
|
JSON 前端开发 JavaScript
webpack学习笔记--优化
webpack学习笔记--优化
|
5天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】使用TypeScript优化JavaScript应用性能
【4月更文挑战第30天】本文探讨了如何使用TypeScript优化JavaScript应用性能。TypeScript通过静态类型检查、更好的编译器优化和IDE支持提升代码稳定性和开发效率。利用类型注解、泛型、类与继承以及枚举和常量,开发者能构建高效、灵活和健壮的代码。逐步将TypeScript引入现有JavaScript项目,并通过案例分析展示性能提升效果。随着TypeScript社区的发展,它将在Web开发性能优化中扮演更重要角色。
|
5天前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript与Webpack构建优化
【4月更文挑战第30天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(关闭不必要的类型检查,适配目标环境)和webpack.config.js(配置entry、output、resolve,使用压缩插件)。启用Webpack缓存和增量构建,利用代码拆分与懒加载,能有效提升构建速度和开发效率。
|
2月前
|
JavaScript 前端开发
在JavaScript中,如何优化原型链的性能?
在JavaScript中,如何优化原型链的性能?
16 2
|
2月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
19 1
|
3月前
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。
|
3月前
|
缓存 前端开发 算法
Webpack 进阶:深入理解其工作原理与优化策略
Webpack 进阶:深入理解其工作原理与优化策略
49 2
|
3月前
|
缓存 JavaScript 前端开发
前端工程化:优化JS加载速度
在现代Web应用中,JavaScript已成为必不可少的一部分,但是随着业务复杂度的增加,JS文件的体积也越来越大,导致网页加载速度变慢,影响用户体验。本文将介绍前端工程化的优化策略,以提高JS文件的加载速度。
24 2