webpack4一些优化点

当项目越来越大，构建的文件也越来越大，时间也越来越长，强迫症的你还可以忍？？？还是要对webpack搞一些优化，看着它构建速度变快，更漂亮才香啊。

找到痛点----速度测量 && 分析包大小

speed-measure-webpack-plugin—分析测速

这个插件可以通过数据直观的展示测量各个general output时长，plugins，loader的速度，迅速量化掌握打包速度，以及哪个plugin/loader拉低了我们的构建效率。

步骤如下：

1. npm install --save-dev speed-measure-webpack-plugin
2. 因为之前搞了eject暴露了webpack.config.js 所以这一步是这样操作的：

// webpack.config.js
  const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  
  const smp = new SpeedMeasurePlugin();
  
  
  module.exports = function(webpackEnv) {
   
    const isEnvDevelopment = webpackEnv === 'development';
    const isEnvProduction = webpackEnv === 'production';
  
    const isEnvProductionProfile =
      isEnvProduction && process.argv.includes('--profile');
  
    const env = ....;
    const getStyleLoaders = (cssOptions, preProcessor) => {
   ...};
                                                           
    return smp.wrap({
   
      mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
      ...
      entry: ...,
      output:{
   ...},
      optimization:{
   ...},
      module: {
   ...},