2017-02-15 1 views
0

Mit chart.js 2.5.0 und webpack 2.2.1 beträgt das resultierende Paket nach der Minimierung 357K. Ich habe verschiedene Möglichkeiten zum Uglify ausprobiert, aber es scheint nicht viel zu bedeuten.npm chart.js ist groß nach Minimierung

Mit Hilfe dieser Dateien:

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 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" 
    } 

}

Beispiel npm Lauf bauen laufen:

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 
+0

Gibt es eine Pre-minimierte Version in dem Paket, das Sie verwenden könnte? – adam0101

Antwort

2

das Problem Diagramm Stellt sich heraus, ist .js in npm abhäng nds auf moment.js, das etwa 250.000 Gebietsschemata enthält. Das Update ist diese locale-Dateien zu ignorieren:

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

Mehr Infos hier:

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