webpack babel 配置優化（待。。。）

代碼壓縮

一、js 文件壓縮

內置uglifyjs-webpack-plugin

二、css 文件壓縮

使用optimie-css-assets-webpack-plugin

使用cssnano

modules.exports = {
  entry: {
    app: './scr/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name][chunkhash:8].js',
    path: __dirname + '/dist'
  },
  plugins: [
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano')
    })
  ]
} 

複製代碼

三、html 文件壓縮 修改html-webpack-plugin, 設置壓縮參數。

module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name][chunkhash:8].js',
path: __dirname + '/dist'
},

plugins: [
 new HtmlWebpackPlugin({
     template: path.join(__dirname, 'src/search.html’),
     filename: 'search.html’,
     chunks: ['search’],
     inject: true,
     minify: {
         html5: true,
         collapseWhitespace: true,
         preserveLineBreaks: false,
         minifyCSS: true,
         minifyJS: true,
         removeComments: false
     }
 })
]
};
複製代碼

基礎庫分離

將 react、react-dom 基礎包經過 cdn 引⼊，不打⼊ bundle 中 方法：html-webpack-externals-plugin.

const HtmlWbpcakExternalsPlugin = require('html-webpack-externals-plugin');
...
plugins: [
  new HtmlWebpackExternalsPlugin({
    externals: [
      {
        module: 'react',
        entry: '../react',
        global: 'React',
      },
      {
        module: 'react',
        entry: '../react',
        global: 'ReactDom'
    }
    ]
  })
]
複製代碼

公共腳本分離

利用SplitChunksPlugin 進行公共腳本分離

chunks 參數說明：

· async 異步引⼊的庫進⾏分離(默認)

· initial 同步引⼊的庫進⾏分離

· all 全部引⼊的庫進⾏分離(推薦)

modules.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
         test: /[\\/]node_modules[\\/]/,
         priority: -10
        }
      }
    }
  }
}
複製代碼

利⽤ SplitChunksPlugin 分離基礎包

module.exports = {
  optimization: {
     splitChunks: {
       cacheGroups: {
         commons: {
           test: /(react | react-dom)/,
           chunks: 'all'
         }
       }
     }
  }
}
複製代碼

利⽤ SplitChunksPlugin 分離⻚⾯公共⽂件

minChunks: 設置最小引用次數2

minSize: 分離包最小體積

module.exports = {
  optimization: {
    splitChunks: {
      minSize: 0,
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2
        }
      }
    }
  }
}
複製代碼

tree Shaking 刪除容易代碼

概念：1 個模塊可能有多個⽅法，只要其中的某個⽅法使⽤到了，則整個⽂件都會被打到bundle ⾥⾯去，tree shaking 就是隻把⽤到的⽅法打⼊ bundle ，沒⽤到的⽅法會在uglify 階段被擦除掉。

webpack配置： webpack 默認⽀持，在 .babelrc ⾥設置 modules: false 便可 production mode的狀況下默認開啓

要求：必須是 ES6 的語法，CJS 的⽅式不⽀持。

利⽤ ES6 模塊的特色:

·只能做爲模塊頂層的語句出現

· import 的模塊名只能是字符串常量

· import binding 是 immutable的

多進程/多實例：使用 HappyPack 解析資源