首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从webpack导入后在Vue应用中出现MomentJS警告

在Vue应用中使用MomentJS时,如果通过webpack导入MomentJS,可能会出现警告。这是因为MomentJS的默认设置会将所有本地化内容打包到应用中,导致应用体积过大。为了解决这个问题,可以使用MomentJS的按需加载功能。

按需加载是指只导入需要使用的MomentJS模块,而不是将整个MomentJS库打包到应用中。这样可以减小应用的体积,并提高加载速度。

要在Vue应用中按需加载MomentJS,可以使用babel-plugin-import插件。首先,安装该插件:

代码语言:txt
复制
npm install babel-plugin-import --save-dev

然后,在babel配置文件中添加以下配置:

代码语言:txt
复制
{
  "plugins": [
    ["import", {
      "libraryName": "moment",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

接下来,在Vue组件中按需导入MomentJS模块:

代码语言:txt
复制
import moment from 'moment';
import 'moment/locale/zh-cn';

export default {
  data() {
    return {
      currentDate: moment().format('YYYY-MM-DD'),
      // 其他使用MomentJS的代码
    };
  },
};

在上面的例子中,我们只导入了MomentJS的核心模块,并按需导入了中文本地化模块。这样就可以在Vue应用中使用MomentJS,而不会出现警告。

推荐的腾讯云相关产品:腾讯云函数(Serverless Cloud Function),它是一种无需管理服务器即可运行代码的计算服务。您可以使用腾讯云函数来托管和运行您的Vue应用,实现按需加载MomentJS等功能。了解更多信息,请访问腾讯云函数官方网站:腾讯云函数

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端性能优化——包体积压缩82%、打包速度提升65%

压缩项目打包的体积大小、提升打包速度,是前端性能优化中非常重要的环节,笔者结合工作的实践总结,梳理出一些 常规且有效 的性能优化建议 项目背景 技术栈:vue-cli3 + vue2 + webpack4...浏览器打开http://127.0.0.1:8888/ 可以看到分析页面 初始打包速度 25386ms totalTime.png 开始优化 ✈︎ 1、externals 提取项目依赖 从上面的打包分析页面可以看到...包体积压缩72%、打包速度提升40% 同时 chunk-vendors.css 的体积也有了明显的减少,206KB降到了82KB 原始体积: originalCss.png 按需引入: babelCss.png...3、减小三方依赖的体积 继续分析打包文件,项目中使用了 momentjs,发现打包后有很多没有用到的语言包 momentJs.png 使用 moment-locales-webpack-plugin...compression-webpack-plugin 插件 1)安装 npm install compression-webpack-plugin -D 复制代码 2)vue.config.js 引入

2.5K30

如何使用webpack减少vuejs打包的大小

由于捆绑了如此众多的应用程序,我们的vue生产构建时,导致多个大小过度的警告。 我们最初的构建规模 当我们进行构建时,我们收到以下2条错误消息: Vue建议捆版bundles不超过244KiB。...npm install --save-dev webpack-bundle-analyzer 接下来,我vue.config.js文件配置webpack来使用它。...Lodash仅在我们的框架的所有应用程序的两个位置使用。这只是两种方法的大量空间。 我们不止加载了lodash,我们也加载了vue-lodash。...有18个地方代码中导入了moment.js。我本可以代码中进行全局搜索和替换。但是如果我们向框架添加一个新的应用程序,开发人员很可能会使用默认调用来导入moment.js。...如果他们这样做,那么我们将再次导入所有国际语言环境。 因此,权衡之后,webpack创建一个快捷方式的别名。该快捷方式将用moment/src/moment替换所有导入moment的调用。

1.7K10
  • 【译】如何使用webpack减少vuejs打包的大小

    由于捆绑了如此众多的应用程序,我们的vue生产构建时,导致多个大小过度的警告。...npm install --save-dev webpack-bundle-analyzer 接下来,我vue.config.js文件配置webpack来使用它。...import { cloneDeep, sortBy } from 'lodash/core'; 进行这一更改,我的构建包的大小2.48MB减少到2.42MB。这是显示构建的当前大小的图像。...有18个地方代码中导入了moment.js。我本可以代码中进行全局搜索和替换。但是如果我们向框架添加一个新的应用程序,开发人员很可能会使用默认调用来导入moment.js。...如果他们这样做,那么我们将再次导入所有国际语言环境。 因此,权衡之后,webpack创建一个快捷方式的别名。该快捷方式将用moment/src/moment替换所有导入moment的调用。

    4.2K20

    vue全局 CLI 配置——vue.config.js

    默认情况下,Vue CLI 会假设你的应用是被部署一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署一个子路径上,你就需要用这个选项指定这个子路径。...默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。 如果你希望让 lint 错误开发时直接显示浏览器,你可以使用 lintOnSave: 'default'。...设置为 true 你就可以 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。 更多细节可查阅:Runtime + Compiler vs....如果你构建的文件是部署 CDN 上的,启用该选项可以提供额外的安全性。...当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS。 提取 CSS 开发环境模式下是默认不开启的,因为它和 CSS 热重载不兼容。

    3K30

    详解 Vue 目录及配置文件之 build 目录

    \n' )) }) }) 1.2.2 check-versions.js 'use strict' // chalk 插件,用来命令行显示彩色文字 const chalk = require...options 里面 // 主要作用就是当配置为 true 就把文件单独提取,false表示不单独提取,这个可以使用的时候单独配置 // 用来返回最终读取和导入 loader,来处理对应类型的文件...config.build.productionSourceMap : config.dev.cssSourceMap module.exports = { // 配置 .vue 文件的 css...webpack 的错误或警告控制台不可见 quiet: true, // necessary for FriendlyErrorsPlugin // 监视文件的选项 watchOptions...导入 extract-text-webpack-plugin 用来抽离 css 防止 css打包压缩到 js const ExtractTextPlugin = require('extract-text-webpack-plugin

    2.4K20

    vue.config.js 配置文件

    默认情况下,Vue CLI 会假设你的应用是被部署一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署一个子路径上,你就需要用这个选项指定这个子路径。...默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。 如果你希望让 lint 错误开发时直接显示浏览器,你可以使用 lintOnSave: 'default'。...设置为 true 你就可以 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。 更多细节可查阅:Runtime + Compiler vs....如果你构建的文件是部署 CDN 上的,启用该选项可以提供额外的安全性。...当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS。 提取 CSS 开发环境模式下是默认不开启的,因为它和 CSS 热重载不兼容。

    2.8K00

    Vue-cli4.5 脚手架学习超详细

    它是一个专门为单页面(SPA)应用快速搭建繁杂的脚手架,它是基于webpack的基础开发出来的一款能够快速的帮助我们构建一个用来开发vue的项目目录、结构(vuewebpack的项目模板)。...是否保存以上配置 y保存 n不保存(保存后会出现命名提示,给当前的配置进行命名。再之后每次搭建项目都会出现自己保存的配置名字) VIII. 安装完成 创建完成的操作,跳去1.5看 VIII....(电脑端): 手机端: 输入 Ctrl+c 关闭项目 打包项目 npm run build 复制代码 打包成功,项目文件通会多出 dist 文件夹 1.6 文件目录解析: node_modules.../App.vue' //引入App.vue页面 /* productionTip设置为 false ,可以阻止 vue 启动时生成生产提示 开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱...而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。

    82240

    Vuejs 中学到了什么

    应用并试图将其挂载到一个不存在的 DOM 节点时就会得到一个警告信息: warn 从这条信息我们得知挂载失败了,并说明了失败的原因:Vue 根据我们提供的选择器无法找到相应的 DOM 元素(返回...所以框架设计和开发的过程,提供友好的警告信息是至关重要的,如果这一点做得不好那么很可能经常收到用户的抱怨。...,构建资源的时候就会被移除,因此 vue.global.prod.js 是不会存在这段代码的。...utils.js 文件定义并导出了两个函数,分别是 foo 和 bar,然后 input.js 中导入了 foo 函数并执行,注意我们并没有导入 bar 函数。...我们知道无论是 rollup 还是 webpack 寻找资源时,如果 package.json 存在 module 字段,那么会优先使用 module 字段指向的资源来代替 main 字段所指向的资源

    57730

    十款值得你关注的Vue.js工具和库

    这主要得益于:Vue的学习曲线,清晰的设计结构和使用文档,让有经验的开发人员其他框架(React和Angular)很方便的入手。...Vue CLI 致力于将 Vue 生态的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注撰写应用上,而不必花好几天去纠结配置的问题。...2、VuePress VuePress是以Vue驱动的静态网站生成器,是一个由VueVue Router和webpack驱动的单页应用。...官方地址:https://gridsome.org/ 4、Vuex SPA单页面组件的开发 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你...使用最先进的CLI设计应用程序,并提供精心编写,速度非常快的Quasar Web组件。 当使用Quasar时,你不需要加载像Hammerjs,Momentjs或Bootstrap这样额外的库。

    3.1K20

    谷粒学院项目实战04——讲师管理模块前端基础(下)

    官网https://nodejs.org/zh-cn/可以下载node.js,建议默认安装到c盘(安装到其他盘可能会出现问题)。 控制台输入node -v如果能够成功的显示版本号,则说明安装成功。...vscode右键一个文件可以选择终端打开,这样就不用每次跑到cmd去运行文件了。vscode中使用node.js可能会遇到vscode的终端输入node -v出现红色提示。...npm install jquery 下载成功目录是这样子的。 npmdemo下的package.json多出来下面内容。...webpack # 有黄色警告 webpack --mode=development # 没有警告 编写test.html文件用于测试。右键浏览器打开即可看到js输出的内容。...11.2 前端框架介绍 (1) 入口文件 main.js其实就是一个导入了很多外部框架的Vue文件。

    50420

    推荐一个零配置开箱即用的ReactVue应用自动化构建脚手架,不强大你来找我

    scss/less转换的css文件),把CSSJS单独抽离出来 内置postcss-loader,用于处理CSS最新特性和草案规范,根据browserslist增加CSS属性前缀 内置sass-loader...规范,使用ESM规范的静态声明特点去除不被引用或不被执行的代码块,起到减包作用 「缓存优化」:开启文件哈希化,根据文件哈希值是否发生变化执行构建操作,哈希无变化的文件直接从缓存获取,减少构建生成文件的时间...,react表示React应用vue表示Vue应用) 「includeModules」:编译模块白名单列表(node_modules/xxx),默认不对node_modules编译 「openPath...细节 IDE相关 推荐使用VSCode开发项目,以下配置也是基于VSCode驱动 若启用Stylelint或Eslint,需IDE上安装Stylelint插件和Eslint插件才能配合本项目校验代码并高亮显示警告和错误...⏳后记 本项目源于2017年3月笔者负责一个Angular2项目里的构建代码,最初的Webpack2一直迭代到今天的Webpack4,话说Webpack5过段时间就要发布了。

    1.8K30

    构建Vue.js组件的10个技巧

    组件可以全局或本地加载 ? Vue.js提供了两种加载组件的方法:一种Vue实例全局,另一种组件级别。两种方法都有其自身的优点。 全局加载组件使其可以应用程序的任何模板(包括子组件)访问。...它会使您的应用程序膨胀,即使它未被使用,它仍将包含在Webpack构建的初始bundle。 ? 本地加载组件使您能够隔离组件并仅在必要时加载它们。...与Webpack结合使用时,只有使用组件时才去延迟加载组件。这使您的初始应用程序文件大小更小,并减少了初始加载时间。 ? 2. 延迟加载/异步组件 使用Webpack的动态导入延迟加载组件。...如果您拥有整个应用程序重复使用的HTML,图形或功能,如按钮,复选框,徽标动画,号召性用语或具有简单更改文本的图形 - 这将是一个很好的候选,抽取到一个新的组件,可以被重用。...修改组件的props 某些情况下,您可能希望修改prop传入的值。但是,这样做会给你一个警告“Avoid mutating a prop directly”,不让直接修改属性。

    2.1K10

    使用Webpack提升Vue.js应用程序的4种方法(翻译)

    本文中,我将解释Webpack增强Vue应用程序的四种方法,包括: Single file components 单文件组件 Optimising the Vue build Browser cache...management Code splitting 关于 vue-cli 如果您使用模板vue-cli构建应用程序,那么将提供预制的Webpack配置。...,minifier可以自动将此类警告代码剥离。...为了节省不必要的服务器请求,我们可以每次文件内容更改时更改其名称,以强制浏览器重新下载该文件。一个简单的系统可以通过文件名附加一个哈希来为文件名添加“指纹”: ?.../AsyncComponent.vue'], resolve) }); Lazy loading Vue.js应用程序vue-router通常是您用于将SPA组织到多个页面的模块。

    2.6K20

    从零开始学VUEWebpack(Html打包插件的使用)

    打包html文件的插件 目前我们的index.html一致是项目的根目录下的 我们知道,真实发布项目的时候,发布的是dist文件夹的内容,但是dist文件夹如果没有index,html,那么打包的...\day1\html\4.0开始学VUE\simpleplugin> 安装成功 修改webpack.config.js文件 // 需要从node依赖引入 需要添加依赖环境 const path =...require('path'); // 导入webpack内置插件 const webpack = require('webpack') // 导入HtmlWebpackPlugin插件 const HtmlWebpackPlugin...\day1\html\4.0开始学VUE\simpleplugin > webpack D:\zhangyugen@jd.com\vue\day1\html\4.0开始学VUE\simpleplugin...\day1\html\4.0开始学VUE\simpleplugin> 看到的错误大概是不能读取属性的 initialize方法,是一个没有定义的,经过查看源码,发现在最新的版本确实没有这个方法了,

    82520
    领券