个人中心
gpt4 book ai didi

javascript - npm chart.js 最小化后很大

转载 作者：行者123 更新时间：2023-11-30 08:27:56 26 4
gpt4 key购买 nike

使用 chart.js 2.5.0 和 webpack 2.2.1，最小化后的 bundle 为 357K。我已经尝试了各种 Uglify 选项，但似乎没什么影响。

使用这些文件:

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Hello webpack</title>
</head>
<body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
</body>

src/app.js

import Chart from 'chart.js'
const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`

webpack.config.js

const webpack = require('webpack')
const path = require('path')

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['es2015', { modules: false }]
                    ]
                }
            }]
        }]
    }
}

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --watch",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.1",
    "babel-preset-es2015": "^6.22.0",
    "chart.js": "^2.5.0",
    "webpack": "^2.2.1"
  }

运行 npm run build 的示例:

Hash: 72bbbb910dcee63f84e8
Version: webpack 2.2.1
Time: 3892ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  357 kB       0  [emitted]  [big]  main
 [109] ../~/chart.js/src/chart.js 1.91 kB {0} [built]
 [128] ../~/chart.js/src/core/core.helpers.js 30.2 kB {0} [built]
 [136] ../~/chart.js/src/core/core.ticks.js 7.03 kB {0} [built]
 [137] ../~/chart.js/src/core/core.title.js 5.39 kB {0} [built]
 [138] ../~/chart.js/src/core/core.tooltip.js 24.5 kB {0} [built]
 [139] ../~/chart.js/src/elements/element.arc.js 2.62 kB {0} [built]
 [140] ../~/chart.js/src/elements/element.line.js 5.32 kB {0} [built]
 [141] ../~/chart.js/src/elements/element.point.js 2.85 kB {0} [built]
 [142] ../~/chart.js/src/elements/element.rectangle.js 5.13 kB {0} [built]
 [144] ../~/chart.js/src/platforms/platform.js 2.83 kB {0} [built]
 [145] ../~/chart.js/src/scales/scale.category.js 3.73 kB {0} [built]
 [146] ../~/chart.js/src/scales/scale.linear.js 5.5 kB {0} [built]
 [147] ../~/chart.js/src/scales/scale.linearbase.js 2.69 kB {0} [built]
 [149] ../~/chart.js/src/scales/scale.radialLinear.js 16.2 kB {0} [built]
 [158] ./app.js 116 bytes {0} [built]
    + 144 hidden modules

最佳答案

原来问题是 npm 中的 chart.js 依赖于 moment.js，其中包含大约 250K 的语言环境。解决方法是忽略这些语言环境文件:

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

更多信息在这里:

How to prevent moment.js from loading locales with webpack?

关于javascript - npm chart.js 最小化后很大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42253275/

26 4 0
文章推荐： javascript - 这个 jQuery 选择是什么意思？为什么我们在 filter() 中使用 "this"？
文章推荐： Java 多播发送方 + 接收方
文章推荐： javascript - 正则表达式:\d 不工作
文章推荐： javascript - 如何一个接一个地修改多个元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com