[ webpack | moment ] moment精简打包

moment默认导入，会引入全部的语言资源文件。

而我们最终使用到的语言资源仅仅是其中的一部分。

默认导入打包后文件大小情况：

我们现在的目的是精简左边的 locale 语言资源文件。

方案一：使用 webpack.IgnorePlugin 

1. webpack.config.js

const webpack = require('webpack')

// 其他相关配置已省略
module.exports = {
    plugins: [new webpack.IgnorePlugin(/^./locale$/, /moment$/)]
}

或者你使用的是 Vue-cli3.0 脚手架生成的项目

在项目`vue.config.js`(没有则新建)

const webpack = require('webpack')

module.exports = {
    configureWebpack:{
        plugins: [
            new webpack.IgnorePlugin(/^./locale$/, /moment$/)
        ]
    }
}

打包时忽略/moment/locale/ 文件夹

然后进入你的项目入口配置 moment

import moment from 'moment'
// 你想要的语言
import 'moment/locale/zh-cn' 
import 'moment/locale/ja'

moment.locale('zh-cn')

配置完成后打包：（我要什么语言资源就打了什么进去） 

 方案二：使用 webpack.ContextReplacementPlugin（推荐）

 只需要配置 webpack 插件

const webpack = require('webpack')

module.exports = {
    configureWebpack:{
        plugins: [
            new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /zh-cn|ja/)
        ]
    }
}

配置完成后打包：（和方案一结果一样）

最后

以上就是怡然帽子为你收集整理的[ webpack | moment ] moment精简打包的全部内容，希望文章能够帮你解决[ webpack | moment ] moment精简打包所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。