Javascript 如何进一步优化网页包包大小

因此，我能够将捆绑包大小从13mb减少到6.81mb

我做了一些优化，比如正确的生产配置，优化库，比如lodash，用date fns替换momentjs

现在，大多数软件包都不超过1mb，并且大多数都是由npm安装的依赖项

使用此处是我的包现在的样子

你们觉得我能做些什么来减少包裹的大小吗？ 也许删除jquery并转到vanilla js？但是它只有1mb。。。我能做些什么来显著优化尺寸吗

如果你愿意的话，可以提供更多的细节

这就是我如何构建

NODE\u ENV=production网页包的方法


const webpack=require（'webpack'））
const path=require（'路径'）
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'））
常量配置={
条目：['babel-polyfill'，'./src/index.js']，
输出：{
path:path.resolve（uu dirname，'./public'），
文件名：'./output.js'
},
决心：{
扩展：['.js'、'.jsx'、'.json'、'.scss'、'.css'、'.jpeg'、'.jpg'、'.gif'、'.png']，//自动解析某些扩展
别名：{//创建别名
images:path.resolve（uu dirname，'src/assets/images'）
}
},
模块：{
规则：[
{
测试：/\.js$/，//以js结尾的文件
排除：/node模块/，
加载器：“巴别塔加载器”
},
{
测试：/\.scss$/,，
用法：['css-hot-loader'、'style-loader'、'css-loader'、'sass-loader'、'postss-loader']
},
{
测试：/\.jsx$/，//以js结尾的文件
排除：/node模块/，
加载器：“巴别塔加载器”
},
{
测试：/\（jpe？g | png | gif | svg）$/i，
装载机：[
“文件加载器？上下文=src/assets/images/&name=images/[path][name].[ext]”，
{
加载器：“图像网页包加载器”，
查询：{
mozjpeg：{
进步的：是的
},
礼物：{
交错：假
},
optipng：{
优化级别：4
},
pngquant：{
质量：“75-90”，
速度：3
}
}
}
],
排除：/node_模块/，
包括：uu dirname
}
]
},
插件：[
新的ExtractTextWebPackagePlugin（'styles.css'），
新的webpack.ProvidePlugin({
$：“jquery”，
jQuery:'jQuery'
}),
//确保这个带有URL的始终是最后一个
新的webpack.DefinePlugin({
DDP_URL:getDDPUrl（），
REST\u URL:getRESTUrl（）
}),
新的LodashModuleReplacementPlugin（{collections:true}）
],
开发服务器：{
contentBase:path.resolve（_dirname，'./public'），//从中提供HTML的目录或URL
historyApiFallback:true，//对于单页应用程序，回退到/index.html
内联：true，//内联模式，（将false设置为禁用包括客户端脚本（如实时重新加载））
打开：true//启动时打开默认浏览器
},
devtool:'eval source map'//启用devtool以获得更好的调试体验
}
module.exports=config
if（process.env.NODE_env===‘生产’）{
module.exports.plugins.push(
// https://reactjs.org/docs/optimizing-performance.html#webpack
新的webpack.DefinePlugin({
'process.env.NODE_env'：JSON.stringify（'production'）
}),
新建webpack.optimize.UglifyJsPlugin（），
新的优化CSSASSets（），
新BundleAnalyzerPlugin（）
)
}
函数getDDPUrl（）{
const local='ws://localhost:3000/websocket'
const prod='produrl/websocket'
让url=local
如果（process.env.NODE_env==='production'）url=prod
// https://webpack.js.org/plugins/define-plugin/
//请注意，由于插件执行直接文本替换，
//给定给它的值必须包含字符串本身内部的实际引号。
//通常情况下，这是通过以下两种方式完成的：，
//例如“production”，或者使用JSON.stringify（“production”）。
返回JSON.stringify（url）
}
函数getRESTUrl（）{
常数本地值http://localhost:3000'
const prod='produrl'
让url=local
如果（process.env.NODE_env==='production'）url=prod
// https://webpack.js.org/plugins/define-plugin/
//请注意，由于插件执行直接文本替换，
//给定给它的值必须包含字符串本身内部的实际引号。
//通常情况下，这是通过以下两种方式完成的：，
//例如“production”，或者使用JSON.stringify（“production”）。
返回JSON.stringify（url）
}
您的问题是，即使在运行webpack生产命令时，您也包含了
devtool:“eval source map”
。这将包括最终捆绑包中的sourcemaps。因此，要删除它，可以执行以下操作：

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

你正在运行
webpack-p
对吗？你在使用uglifyjs插件删除注释吗？@the.Bear-yup，我添加了我的配置和我使用的命令以获取更多详细信息。我现在将尝试添加
{comments:false}
。至于生产，是的，我确信它正在进入生产。@The.Bear，所以我添加了console.log，它正在进入生产。传递
{output:{comments:false}}
不会改变任何内容。如果我将其作为
true
传递，那么包大小只会增加0。01mb@The.Bear难以置信的禁用源映射将捆绑包大小从6mb减少到仅900kb！回答这个问题，这样我就接受了。