打包阶段

第一步：安装speed-measure-webpack-plugin
第二步：安装cache-loader
第三步：安装happypack
第四步：安装webpack-parallel-uglify-plugin
打包总结

上线优化阶段

第一步：基础优化
第二步：路由懒加载和按需引入
第三步：优化代码和合并相同的包
第四步：在服务器上的优化
上线优化总结

打包阶段

这是一个基于webpack@3.6.0[1]的项目，所以在安装各种功能包的时候要注意其版本，所以下面的安装包我都贴心的把对应的版本加上了，大家放心使用。

第一步：安装speed-measure-webpack-plugin

安装包版本："speed-measure-webpack-plugin": "^1.5.0"

该安装包的作用：在打包的过程中，能够精确的帮你分析出每一个步骤耗费的时间，然后我们可以针对时间比较长的部分专门做优化。

以下配置

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");  
const smp = new SpeedMeasurePlugin();  
const webpackConfig = smp.wrap(merge(baseWebpackConfig, {  
        ...  
    })  
)

执行npm run build之后，我们可以看到以下结果。

第二步：安装cache-loader

安装包版本："cache-loader": "^4.1.0"

对sass-loader、postcss-loader、vue-loader做打包缓存，缩短打包的时间。

以下是对vue-loader和url-loader做缓存的代码：

const cacheLoader = {  
  loader: 'cache-loader'  
}  
rules: [  
  {  
    test: /\.vue$/,  
    use: [  
      cacheLoader,  
      {  
        loader: 'vue-loader',  
        options: vueLoaderConfig  
      }  
    ]  
  },  
  ......  
  {  
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  
    use: [  
      cacheLoader,  
      {  
        loader: 'url-loader',  
        options: {  
          limit: 10000,  
          name: utils.assetsPath('img/[name].[hash:7].[ext]')  
        }  
      }  
    ]  
  }

以下是对cssLoader、postcssLoader做缓存的代码：

const loaders = options.usePostCSS 
? [cacheLoader, cssLoader, postcssLoader] 
: [cacheLoader, cssLoader]

执行npm run build之后，我们可以看到以下结果：

对比之后的成果：plugin打包时间缩短了0.8秒钟，loader时间缩短了2.94秒钟，打包一共缩短了2.7秒钟。由于这个项目包比较小，缩短的时间不是特别明显。

第三步：安装happypack(当前项目太小，没有起到效果，当时后端管理项目有优化效果)

安装包版本："happypack": "^5.0.1"

可以在打包的时候开启多线程打包.使用链接如下:www.npmjs.com/package/hap... 因为上面主要是sass-loader包最占用时间,并且已经开启缓存,时间上优化到很小的一个水平了,当然,我重新开启了happypack进行多线程打包,可能由于项目太小,发现时间不仅没有变短,还多了0.2秒.划不来了,就不画蛇添足了,对这个功能好奇的朋友可以尝试解锁一下. 稍大一些项目可以开启这个多线程打包模式,根据具体的项目而定