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

代码压缩

一、js 文件压缩css

内置uglifyjs-webpack-pluginhtml

二、css 文件压缩html5

使用optimie-css-assets-webpack-pluginnode

使用cssnanoreact

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, 设置压缩参数。webpack

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.web

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 参数说明：babel

· async 异步引⼊的库进⾏分离(默认)markdown

· initial 同步引⼊的库进⾏分离app

· 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的