[英]Minimize bundle with webpack2
是否可以最小化我的捆绑文件和所有使用的模块。 我在javascript中使用import但我希望webpack也能最小化所有导入的js文件。 这意味着从导入的外部库中删除所有未使用的代码。 这可能吗。 特别是剧情是一个非常大的图书馆,但我只使用饼图。 我不认为我的包需要来自剧情的所有代码。 这是我的webpack配置文件:
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
entry:
{
cash: './js/page/cash.js'
},
output:
{
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist')
},
resolve:
{
modules: [
path.resolve(__dirname, 'js')
],
alias : {
knockout: path.resolve(__dirname, 'js/knockout-3.4.2.js'),
moment: path.resolve(__dirname,'js/moment.js')
}
},
module:
{
rules: [
{
test: /\.js$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new UglifyJSPlugin({
comments: false,
sourceMap: false,
compress: {
unused: true,
dead_code: true,
warnings: false,
drop_debugger: true,
conditionals: true,
evaluate: true,
drop_console: true,
sequences: true,
booleans: true
},
mangle: true
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin()
]
};
module.exports = config;
执行此操作的最佳方法是使用ES6 import
语法有选择地导入所需的成员(函数)。 Webpack的文档描述了如何操作。 如果你这样做,Webpack应该自动执行Tree Shaking。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.