react用webpack打包好用，但比较尴尬的是打包后的react文件大小...首屏加载太慢了，怎么办？慢慢优化。。。一般正常的网站首屏加载应该在1s左右，这个体验简直太棒了。既然优化了，那就从资源文件的大小入手。可能有人会说，既然优化了，就应该点播。这确实是个好主意，但是如果你打包的文件不是很大，其实也没有必要做按需。首先配置全局变量，告诉webpack我要发布production，按照production方式打包。newwebpack.DefinePlugin({'process.env':{//注意单引号和双引号...这里是将"production"替换成文件NODE_ENV:'"production"'}})1.注意devtoolsource-map。如果你打包后的文件莫名其妙有好几MB...看这个文件真的是几万奔腾...如果是好几MB，那你就别想了。它必须是源映射问题。注意source-map类型几种类型的.webpacksourcemap选项多种模式的一些解释https://webpack.github.io/docs/configuration.html#devtoolsourcemap在开发调试的时候确实很有用，但是只有在开发的时候...在生产环境中没有太多需要使用这个。当然也有人选择在生产环境开启source-map方便调试，但我觉得真的没必要。生产环境调试的方法有很多，没必要用这种方法。大家可以试试看，打开devtool打包的文件devtool:"inline-source-map"，瞬间高潮。这个js没有10s就挂在服务器上了。记得第一次打包到服务器上的时候，满怀期待。打开页面后的场景...其实你就会知道source-map的不同方式了。inline-source-map为每个文件添加sourcemap的DataUrl。请注意，这里的文件是打包前的每个文件，而不是最终的包。是的，同时，这个DataUrl是一个Base64格式的字符串，包含了一个文件的完整sourcemap信息，而不是一个url。生产环境打包时建议关闭devtool。如果非要在线使用source-map，可以配置为devtool:"#source-map"，这样文件后面只会跟着一个url，对源文件影响不大你可以看看那个vendor使用#source-map后，.js从3.9M减少到1.52MB。如果在生产环境中一定要使用source-map，请慎重选择。2、制作css剥离js文件，单独打包css。依赖插件npminstall--save-devextract-text-webpack-plugin先安装再使用varExtractTextPlugin=require('extract-text-webpack-plugin');//在plugins中配置插件：[newExtractTextPlugin('[name].[contenthash].css')]将css单独打包，以免以后修改css导致浏览器端js缓存失效.这里使用了contenthash，webpack会根据内容生成一个hash值。3.压缩，去除注释注意，如果开启了source-map并且选择了inline-source-map，压缩后还是有几MB//Addnewwebpack.optimize.UglifyJsPlugin({comments:false,//去除注释compress:{warnings:false//忽略警告，否则会有很多黄色字体...}})最好启用和去除代码注释。代码压缩后，提升简直不是一分两分……哇塞，太厉害了。其实还是不行，所以首屏加载会比较慢，那gzip怎么办。4.启用gzip压缩依赖插件npminstall--save-devcompression-webpack-pluginit地址：compression-webpack-pluginvarCompressionWebpackPlugin=require('compression-webpack-plugin');//AddnewCompressionWebpackPlugin({//gzip压缩资源:'[path].gz[query]',algorithm:'gzip',test:newRegExp('\\.(js|css)$'//压缩jsandcss),threshold:10240,minRatio:0.8})这个很满意了。。。这个截图是在服务端请求js的。之前这个js用了10多秒...（云服务器最低配置的那种）从3.9MB到115KB！！！太棒了。5.压缩html，自动添加上面生成的静态资源。依赖插件npminstall--save-devhtml-webpack-pluginit地址：html-webpack-pluginvarHtmlWebpackPlugin=require('html-webpack-plugin');newHtmlWebpackPlugin({filename:'react.html',//生成文件，从output.path开始output.path+"/react.html"template:'../client/react.html',//模板要读取的文件，这个路径是相对于当前配置文件的注入:true,//自动注入minify:{removeComments:true,//反注释collapseWhitespace:true,//压缩空格removeAttributeQuotes:true//移除属性引用//moreoptions://https://github.com/kangax/html-minifier#options-quick-reference},//必须自动添加js,css等chunksSortMode:'dependency'})通过依赖项上面CommonsChunkPlugin生成的文件名自动注入到html中。如果有多个html配置，添加一个新的HtmlWebpackPlugin()。总结在生产环境中一定不要打包冗余代码。例如，热加载只是一个示例，检查仅在开发中使用的配置，并在生产环境中将其移除。可以使用配置文件，灵活配置，灵活切换，去除所有注释，压缩所有可压缩资源文件。打开gzip压缩。总而言之，为了让文件更小，为了让浏览器加载更快，我们真的是想尽一切办法……以上是给汹涌的心的……
