1.为什么我们需要构建工具 (a) 转换ES6语法 (b) 转换JSX © CSS前缀补全/预处理器 (d) 压缩混淆 (e) 图片压缩
2.初级分析-使用Webpack内置的stats (a) stats：构建的统计信息 (b) package.json中使用status
"scripts": { "build:stats": "webpack ---env production --json > stats.json" ... }© Node API中使用
const webpack = require('webpack'); const config = require('./webpack.config.js')("production"); webpack(config, (err, stats) => { if (err) { return console.error(err); } if (stats.hasErrors()) { return console.error(stats.toString("errors-only")) } console.log(stats); })3.速度分析-使用speed-measure-webpack-plugin
const speedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); const webpackConfig = smp.wrap({ plugins: { new MyPlugin(), new MyOtherPlugin() } }) // 可以看到每个loader和插件执行耗时4.体积分析-使用webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: { new BundleAnalyzerPlugin() } } // 构建完成后会在8888端口展示各个打包后文件的大小1.速度优化策略 (a) 使用webpack4 (b) 多进程/多实例构建 © 分包 (d) 缓存 (e) 缩小构建目标
2.使用webpack4-优化原因 (a) V8带来的优化（for of替代forEach、Map和Set替代Object、includes替代indexOf） (b) 默认使用更快的md4 hash算法 © webpacks AST可以直接从loader传递给AST，减少解析时间 (d) 使用字符串方法替代正则表达式
3.多进程/多实例-使用HappyPack解析资源 原理：每次webpack解析一个模块，HappyPack会将它及它的依赖分配给worker线程中
exports.plugins = { new HappyPack({ id: 'jsx', threads: 4, // 固定线程数，但是不建议 loaders: ['babel-loader'] }), new HappyPack({ id: 'styles', threads: 2, // 固定线程数，但是不建议 loaders: ['style-loader', 'css-loader', 'less-loader'] }) }4.多进程/多实例-并行压缩 方法一：使用parallel-uglify-plugin插件（webpack3使用）
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); module.exports = { plugins: [ new ParallelUglifyPlugin({ uglifyJS: { output:{ beautity: false, comments: false, }, compress: { warnings: false, drop_console: true, collapse_vars: true, reduce_vars: true } } }) ] }方法二：使用uglifyjs-webpack-plugin开启parallel参数（webpack4使用）
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { plugins: [ new UglifyJsPlugin({ uglifyOptions: { warnings: false, parse: {}, compress: {}, mangle: true, output: null, toplevel: false, nameCache: null, ie8: false, keep_fnames: false }, parallel: true }) ] }注意：uglifyjs-webpack-plugin现已废弃，用terser-webpack-plugin代替，支持ES6：
const TerserWebpackPlugin = require('terser-webpack-plugin') new TerserWebpackPlugin({ cache: true, parallel: true, sourceMap: build.productionSourceMap, terserOptions: { warnings: false } })5.分包-设置Externals 思路：将react、react-dom基础包通过cdn引入，不打入bundle中 方法：使用html-webpack-externals-plugin
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin'); plugins: [ new HtmlWebpackExternalsPlugin({ external: [ { module: 'react', entry: '........./react-with-addons.min.js?_bid=313', global: 'React' }, { module: 'react-dom', entry: '........./react-dom.min.js?_bid=313', global: 'ReactDOM' } ] }) ]6.进一步分包-预编译资源模块 思路：将react、react-dom、redux、react-redux基础包和业务基础包打包成一个文件。 方法：使用DLLPlugin进行分包，DllReferencePlugin对manifest.json引用
module.exports = { plugins: [ new webpack.DllPlugin({ name: '[name]', path: './build/library/[name].json' }) ] }7.缓存 目的：提升二次构建速度 方法：使用HardSourceWebpackPlugin或者cache-loader 比较推荐使用HardSourceWebpackPlugin，速度更快
8.缩小构建目标 目的：尽可能的少构建模块 比如babel-loader不解析node_modules
module.exports = { rules: { test: /\.js$/, loader: 'happypack/loader', exclude: 'node_modules' } }1.体积优化策略 (a) Scope Hoisting (b) Tree-shaking © 公共资源分离 (d) 图片压缩 (e) 动态Polyfill
2.Scope Hoisting 原理：将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突 对比：通过scope hoisting可以减少函数声明代码
// 代码示例： module.exports = { plugins: [ new webpack.opimize.ModuleConcatenationPlugin() ] } // 要求：必须是ES6的语法，CJS的方式不支持3.Tree-shaking 概念：1个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到bundle里面去，Tree-shaking 就是只把用到的方法打入bundle，没用到的方法会在uglify阶段被删掉 使用：webpack默认支持，在.babelrc里设置modules：false即可 要求：必须是ES6的语法，CJS的方式不支持
4.公共资源分离 目的：提取多页面公共JS chunk代码 使用：webpack3使用CommonsChunkPlugin webpack4使用SplitChunksPlugin
5.图片压缩 要求：基于Node库的imagemin或者tinypng API 使用：配置image-webpack-loader
