《深入浅出webpack》（四、优化首屏加载时间）

1.区分环境

if (process.env.NODE_ENV === 'production') {
   
  console.log('你正在线上环境');
} else {
   
  console.log('你正在使用开发环境');
}

2.压缩代码

要在 Webpack 中接入 UglifyJS 需要通过插件的形式，目前有两个成熟的插件，分别是：

• UglifyJsPlugin：通过封装 UglifyJS 实现压缩。
• ParallelUglifyPlugin：多进程并行处理压缩。

在不影响代码正确执行的前提下，最优化的代码压
缩配置为如下：

const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = {
   
  plugins: [
    // 压缩输出的 JS 代码
    new UglifyJSPlugin({
   
      compress: {
   
        // 在UglifyJs删除没有用到的代码时不输出警告
        warnings: false,
        // 删除所有的 `console` 语句，可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true,
      },
      output: {
   
        // 最紧凑的输出
        beautify: false,
        // 删除所有的注释
        comments: false,
      }
    }),
  ],
};

3.CDN 加速

CDN 又叫内容分发网络，通过把资源部署到世界各地，用户在访问时按照就近原则从离用户最近的服务器获取资源，从而加速资源的获取速度。

• 静态资源的导入 URL 需要变成指向 CDN 服务的绝对路径的 URL 而不是相对于 HTML 文件的 URL。
• 静态资源的文件名称需要带上有文件内容算出来的 Hash 值，以防止被缓存。
• 不同类型的资源放到不同域名的 CDN服务上去，以防止资源的并行加载被阻塞。

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const