webpack生产模式（上线）开发配置。

1. 新建 webpack.prod.config.js 文件，作为生产模式的配置文件，在package.json里添加script脚本。

每次运行npm run product 就可以执行webpack.prod.config.js 来进行webpack构建。

2. 添加webpack.prod.config.js 内容

2.1 copy 开发模式webpack.config.js内容，去掉webpack-dev-server以及热更新部分。

2.2 在plugins 里添加生产环境代码。在一些框架里，开发环境会有很多警告代码。来提示用户如何提升性能，而当处于开发模式，就会去除掉不执行的代码。

2.3

 
   var 
   uglifyjs = 
   require( 
   'uglifyjs-webpack-plugin') 
  

    在plugins里添加： 
   new 
   uglifyjs(), 
  

进行代码压缩，去除注释/去除console.log以及一些没有实际功能的代码。加快运行速度。

我们执行npm run product 可以看到 bundle.js被压缩。压缩工具进行变量替换、缩小空格等方法尽可能减少js文件体积。

2.3 服务端开启gzip 。这一点很重要。js代码经过二进制压缩可以进一步减少体积。服务端以node.js koa2 为例；

 
  const 
  compress = 
  require( 
  'koa-compress'); 
 

 
   const 
   options = { 
   threshold: 
   2048 }; 
  
 
   app. 
   use( 
   compress( 
   options)); 
  

koa-compress 是用来提供gzip压缩的中间件。

3. 实际测试。我们以用户200kb/s 的下载速度来计算（不计算缓存）

3.1未处理仅编译的打包工具代码体积

3.2 开启生产环境的打包体积

3.3 开启生产环境代码压缩后的打包体积

3.4 开启gzip 文件压缩为二进制，传输大小仅为432KB

综上所述从4.2M 经过几步压缩 4.2M => 3.5M => 1.84M => 432kb 用户访问时间大大减少。

因为是个人开发条件受限，企业级开发还会有更加细致的缓存资源、CDN等用来加快用户访问速度。

（注意：开发环境第一次构建稍慢，之后更新代码构建很快。而生产环境构建时间比较久，一次构建成功就可以稳定运行。）