webpack 常用操作

已于 2023-02-07 18:51:01 修改
阅读量6.3k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： webpack nodejs JS 文章标签： js momentjs webpack
于 2018-10-25 11:58:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qinjm8888/article/details/83377352
本文介绍如何使用webpack的ContextReplacementPlugin插件来优化MomentJS的打包过程，通过配置仅包含zh-cn语言包，显著减小了最终文件的体积。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、webpack 按需加载momentjs 语言包
    momentjs是一个很好用的日期处理插件。但是webpack打包时我们会发现这个插件体积比较大(如下图)如图可以看出locale是大的主要原因

    webpack提供的ContextReplacementPlugin插件允许我们覆盖打包时的查找规则

plugins: [
  new webpack.ContextReplacementPlugin(
    /moment[/\\]locale$/,
    /zh-cn/,
  ),
]

    配置只打包zh-cn语言包后文件体积明显减少

【包真】我的第一次webpack优化，首屏渲染从9s到1s
qq_15589375的博客
03-06 1030
大家好，我是猫小白，本文基于vue2，全文阅读大约需要3分钟。 谈到webpack优化大部分人可能都看腻了，无非就那几招嘛，我之前也是看过许多类似的文章，但都没有自己真正上手过，下面是我用公司的项目真实操练下来的，首屏加载速度提升很大（刷刷的），希望能帮到你。 废话不多说，先看看对比成果！ 类型 优化前 优化后 js文件大小 24MB 3MB 主页首屏显示 9s 1s 这简直太夸张了，提升了8倍？可以想象以前是多慢，要等半天啊。蛮王这个真男人都.
面试：webpack常用loader和plugin
前端金牌摸鱼达人
05-29 637
webpack常用loader和plugin
vue项目优化之按需加载组件-使用webpack require.ensure与import
追梦猪的博客
08-10 463
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码router/index.js 路由相关信息,该路由文...
webpack html加载完毕,webpack中实现按需加载
weixin_35756624的博客
06-08 199
当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间，提高访问速度。使用webpack打包的出来的文件要实现以上的要求有两种方式，一个是webpack特有的require.ensure方法，还有一个是import方法。require.ensure(dep: array, cb: function, name?: string)...
Vue-I18n 项目中的翻译懒加载技术详解
最新发布
gitblog_00193的博客
06-06 389
Vue-I18n 项目中的翻译懒加载技术详解 前言 在国际化应用开发中，翻译文件的管理是一个重要课题。随着应用规模的扩大，翻译文件可能会变得非常庞大。如果一次性加载所有语言包，不仅会浪费带宽，还会影响应用的初始加载性能。本文将详细介绍如何在 Vue-I18n 项目中实现翻译文件的懒加载。 懒加载的基本概念 懒加载（Lazy Loading）是一种优化技术，它延迟加载某些资源，直到真正需要时才加载。...
Next.js系列——按需加载
海带的博客
08-08 574
Next.js系列——按需加载
moment安装引入及其获取各类时间用法
qq_39536826的博客
02-16 2655
moment获取各类时间用法
【webpack基础】Webpack 常用命令总结
06-08
### Webpack常用命令详解 #### 一、Webpack安装与初始化 **全局安装Webpack与Webpack-CLI** ``` npm install webpack webpack-cli -g ``` 在全局范围内安装Webpack和Webpack-CLI，这允许开发者无需在每个项目中...
webpack常用命令
03-21
以下是 Webpack 的一些常用命令： 1. **基本启动命令** - `npx webpack`：运行 Webpack 打包，默认会读取项目的 `webpack.config.js` 配置文件并生成打包结果。 2. **指定环境模式** - `npx webpack --mode ...
webpack常用配置总览(小结)
10-15
如果不设置，默认是执行webpack命令时所在的当前工作目录。 2. **entry**： entry属性指定了webpack的入口文件。它可以配置成一个字符串或一个对象，用于指定多个入口文件。通过指定不同的入口文件，可以创建多个...
webpack ContextReplacementPlugin插件
Bonrui编程路
10-25 3879
此插件允许覆盖webpack打包时的查找规则 一、用法： new webpack.ContextReplacementPlugin( resourceRegExp: RegExp, newContentResource?: string, newContentRecursive?: boolean, newContentRegExp?: RegExp ) 如果资源（或目录）...
如何使用webpack优化moment.js：解释如何使用webpack优化moment.js的大包
02-20
如何使用Webpack优化Moment.js 当您在代码中编写var moment = require('moment')并使用webpack打包时，捆绑文件的大小会变得很重，因为它包含所有区域设置文件。 为了优化大小，提供了两个webpack插件： IgnorePlugin ContextReplacementPlugin 使用IgnorePlugin 您可以使用IgnorePlugin删除所有语言环境文件。 const webpack = require ( 'webpack' ) ; module . exports = { //... plugins : [ // Ignore all locale files of moment.js new webpack . IgnorePlugin ( / ^ \. \/ locale $ / , /mo
.net网页代码隐藏方法“这是预编译工具生成的标记文件，不应被删除!”
huike008的博客
01-01 1209
现在进行编译，我以我的计算机为例，我的IIS的路径是d:\myweb我在d盘的根目录下建了一个newweb的目录，准备用来存放编译好的网页．现在可以在提示符下键入命令，路径已经设置好了． 命令:aspnet_compiler -v /myweb -p d:\myweb d:\newweb [回车] 好了，等待编译器指示编译完成，现在可以打开资源管理器里查看刚刚建的目录了，所有已经编译好的...
引入moment时使用中文
前端-舟遥遥的博客
09-27 1万+
import moment from 'moment'; moment.locale('zh-cn');或者moment.lang('zh-cn');即可显示中文
momentJs使用
ZHANGF13的博客
01-17 1476
写在前：最近在写一个后台管理系统，使用了Vue全家桶+antd design 前端UI框架，遇到一个日期组件需要使用moment类型对象，遂于网上查找资料，经过各种错假信息的洗礼终于获取到moment的正确使用方法，遂记之。 引入 全局引入，在main.js引入 import moment from 'moment Vue.prototype.$moment = moment ; 组件引...
moment.js的使用方法
热门推荐
程序猿成长之路
03-14 1万+
https://itbilu.com/nodejs/npm/4k1vtctZl.html
封装异步(按需)加载js函数(考虑兼容)
天明的博客
03-26 662
这篇笔记标题是最终的一个目的，那么在此之前还有几个其他的点需要做介绍。 一、html文档渲染模式 通俗来讲就是说网页展现的一个流程，HTML文档解析过程是单线程的，起初以一个DOMTree解析html结构（深度优先原则），当碰到标签需下载文件时会异步的进行下载，所以标签解析完成时间肯定是先于页面加载的，DOMTree完成后加载CSSTree，两者结合形成最终的渲染树randerTree，DOM...
momentjs常用命令汇总
柠檬果茶
03-06 876
npm install moment 计算两个时间的差：moment(time1).diff(time2, type, boolean) time1和time2支持类型：Moment|String|Number|Date|Array； type支持值为：years, months, weeks, days, hours, minutes, seconds； 第三个参数默认为false，即为...
Webpack 性能优化 （一）（使用别名做重定向）
weixin_34368949的博客
04-21 324
前言 Webpack 是 OneAPM 前端技术栈中非常重要的一部分。它非常好用，假设你还不了解它，建议你阅读这篇 Webpack 入门指迷 ，在 OneAPM 我们用它完毕静态资源打包。ES6 代码的转换 ，React 组件的组织等，在接下来的日子里，我们将通过一系列文章和业界分享我们在使用 Webpack 过程中关于性能方面的经验。 作为系列文章的第一篇。我们会重点介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值