admin管理员组文章数量:1401673
Using chart.js 2.5.0 and webpack 2.2.1, the resulting bundle after minimization is 357K. I've tried various options to Uglify, but not much seems to matter.
Using these files:
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"
}
}
Example of running 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
Using chart.js 2.5.0 and webpack 2.2.1, the resulting bundle after minimization is 357K. I've tried various options to Uglify, but not much seems to matter.
Using these files:
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"
}
}
Example of running 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
- Is there a pre-minified version in the package you could use? – adam0101 Commented Feb 15, 2017 at 15:20
2 Answers
Reset to default 8Turns out the issue is chart.js in npm depends on moment.js, which inludes about 250K of locales. The fix is to ignore these locale files:
var webpack = require("webpack");
module.exports = {
// ...
plugins: [
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
// new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
};
More info here:
How to prevent moment.js from loading locales with webpack?
As JOP explained, Chart.JS depends on moment.js package that has 250K with locales.
If you don't have dates in your chart data you can remove moment package pletely from result bundle without replacing it with another package. Moment package just could be marked as an external dependency in webpack.
I.e. something like this, depending on you webpack configuration.
module.exports = {
...
externals: {
moment: 'moment',
},
}
本文标签： javascriptnpm chartjs is big after minimizationStack Overflow
版权声明：本文标题：javascript - npm chart.js is big after minimization - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744212575a2595490.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论