所以我能够将我的包大小从13mb减少到6.81mb
我做了一些优化,比如正确的生产配置,优化lodash等库,并用date-fns替换momentjs。
现在达到了大多数软件包不超过1mb的程度,其中大部分都是由npm安装的依赖项。
在这里使用webpack-bundle-analyzer是我的包现在的样子
那么你们认为我可以做些什么来减少捆绑尺寸吗? 也许删除jquery并去vanilla js?但那时它只有1mb ......我能做些什么才能显着优化尺寸?
如果你想要更多细节
这是我的构建NODE_ENV=production webpack
const webpack = require('webpack')
const path = require('path')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const config = {
entry: ['babel-polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, './public'),
filename: './output.js'
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.scss', '.css', '.jpeg', '.jpg', '.gif', '.png'], // Automatically resolve certain extensions
alias: { // Create Aliases
images: path.resolve(__dirname, 'src/assets/images')
}
},
module: {
rules: [
{
test: /\.js$/, // files ending with js
exclude: /node-modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: ['css-hot-loader', 'style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
},
{
test: /\.jsx$/, // files ending with js
exclude: /node-modules/,
loader: 'babel-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?context=src/assets/images/&name=images/[path][name].[ext]',
{
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true
},
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 4
},
pngquant: {
quality: '75-90',
speed: 3
}
}
}
],
exclude: /node_modules/,
include: __dirname
}
]
},
plugins: [
new ExtractTextWebpackPlugin('styles.css'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
// make sure this one with urls is always the last one
new webpack.DefinePlugin({
DDP_URL: getDDPUrl(),
REST_URL: getRESTUrl()
}),
new LodashModuleReplacementPlugin({collections: true})
],
devServer: {
contentBase: path.resolve(__dirname, './public'), // a directory or URL to serve HTML from
historyApiFallback: true, // fallback to /index.html for single page applications
inline: true, // inline mode, (set false to disable including client scripts (like live reload))
open: true // open default browser while launching
},
devtool: 'eval-source-map' // enable devtool for bettet debugging experience
}
module.exports = config
if (process.env.NODE_ENV === 'production') {
module.exports.plugins.push(
// https://reactjs.org/docs/optimizing-performance.html#webpack
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin(),
new OptimizeCSSAssets(),
new BundleAnalyzerPlugin()
)
}
function getDDPUrl () {
const local = 'ws://localhost:3000/websocket'
const prod = 'produrl/websocket'
let url = local
if (process.env.NODE_ENV === 'production') url = prod
// https://webpack.js.org/plugins/define-plugin/
// Note that because the plugin does a direct text replacement,
// the value given to it must include actual quotes inside of the string itself.
// Typically, this is done either with either alternate quotes,
// such as '"production"', or by using JSON.stringify('production').
return JSON.stringify(url)
}
function getRESTUrl () {
const local = 'http://localhost:3000'
const prod = 'produrl'
let url = local
if (process.env.NODE_ENV === 'production') url = prod
// https://webpack.js.org/plugins/define-plugin/
// Note that because the plugin does a direct text replacement,
// the value given to it must include actual quotes inside of the string itself.
// Typically, this is done either with either alternate quotes,
// such as '"production"', or by using JSON.stringify('production').
return JSON.stringify(url)
}

答案 0 :(得分:1)
您的问题是,即使您运行webpack生产命令,也包括devtool: 'eval-source-map'
。这将包括最终包中的源图。因此,要删除它,您可以执行以下操作:
var config = {
//... you config here
// Remove devtool and devServer server options from here
}
if(process.env.NODE_ENV === 'production') { //Prod
config.plugins.push(
new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')}),
new OptimizeCSSAssets(),
/* The comments: false will remove the license comments of your libs
and you will obtain a real single line file as output */
new webpack.optimize.UglifyJsPlugin({output: {comments: false}}),
);
} else { //Dev
config.devServer = {
contentBase: path.resolve(__dirname, './public'),
historyApiFallback: true,
inline: true,
open: true
};
config.devtool = 'eval-source-map';
}
module.exports = config