最小値の後にnpm chart.jsが大きくなる

chart.js 2.5.0とwebpack 2.2.1を使用すると、最小化後の結果のバンドルは357Kです。私はUglifyにさまざまなオプションを試しましたが、それほど重要ではないようです。最小値の後にnpm chart.jsが大きくなる

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.conf：これらのファイルを使用して

NPMの実行がを構築し実行しているのig.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" 
    }

}

例：

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

出典

2017-02-15 JOP

を使用することができ、パッケージ内の事前縮小さバージョンはありますか？ – adam0101

しても問題が判明チャートであります.js in npm depe moment.jsのndsには、約250,000のロケールが含まれています。ここ

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?

出典

2017-02-15 15:52:47 JOP

最小値の後にnpm chart.jsが大きくなる

答えて

関連する問題