使用CommonsChunkPlugin
多入口情况下，使用CommonsChunkPlugin来提取公共代码
module.exports = {plugins: [new CommonsChunkPlugin({name: 'vender', // 公共代码的chunk命名为 'verder'filename: '[name].bundle.js' // 生成的文件名为 vender.bundle.js})]
};
使用externals
通过externals配置来提取常用库
module.exports={configureWebpack:{externals: {'element-ui': 'ELEMENT','vue': 'Vue','vue-router': 'VueRouter',}}
}
使用Happypack
使用Happypack 实现多线程加速编译
const HappyPack = require('happypack');module.exports = {...module: {rules: [test: /\.js$/,// use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader// 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件use: ['happypack/loader?id=babel'],// 排除 node_modules 目录下的文件exclude: /node_modules/]},plugins: [...,new HappyPack({/** 必须配置*/// id 标识符，要和 rules 中指定的 id 对应起来id: 'babel',// 需要使用的 loader，用法和 rules 中 Loader 配置一样// 可以直接是字符串，也可以是对象形式loaders: ['babel-loader?cacheDirectory']})]
}
使用webpack-uglify-parallel
使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。
原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
//npm i webpack-parallel-uglify-pluginmodule.exports = {new ParallelUglifyPlugin({cacheDir: ".cache/",uglifyJS: {output: {comments: false},warnings: false,compress: {drop_debugger: true,drop_console: true}}})
}
JS代码压缩
terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让bundle更小。在production模式下，webpack
默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它，配置方法如下：
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {...optimization: {minimize: true,minimizer: [new TerserPlugin({parallel: true // 电脑cpu核数-1})]}
}
CSS代码压缩
CSS压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等。CSS的压缩我们可以使用另外一个插件：css-minimizer-webpack-plugin。
// npm install css-minimizer-webpack-plugin -D
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {// ...optimization: {minimize: true,minimizer: [new CssMinimizerPlugin({parallel: true})]}
}
HTML文件压缩
使用HtmlWebpackPlugin插件来生成HTML的模板时候，通过配置属性minify进行html优化。
module.exports = {...plugin:[new HtmlwebpackPlugin({...minify:{minifyCSS:false, // 是否压缩csscollapseWhitespace:false, // 是否折叠空格removeComments:true // 是否移除注释}})]
}
文件大小压缩
对文件的大小进行压缩，减少http传输过程中宽带的损耗。
// npm install compression-webpack-plugin -D
new ComepressionPlugin({test:/\.(css|js)$/, // 哪些文件需要压缩threshold:500, // 设置文件多大开始压缩minRatio:0.7, // 至少压缩的比例algorithm:"gzip", // 采用的压缩算法
})
图片压缩
一般来说在打包之后，一些图片文件的大小是远远要比 js 或者 css 文件要来的大，所以图片压缩较为重要。
module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'file-loader',options: {name: '[name]_[hash].[ext]',outputPath: 'images/',}},{loader: 'image-webpack-loader',options: {// 压缩 jpeg 的配置mozjpeg: {progressive: true,quality: 65},// 使用 imagemin**-optipng 压缩 png，enable: false 为关闭optipng: {enabled: false,},// 使用 imagemin-pngquant 压缩 pngpngquant: {quality: '65-90',speed: 4},// 压缩 gif 的配置gifsicle: {interlaced: false,},// 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式webp: {quality: 75}}}]},]
}
Tree Shaking
使用Tree-shaking和Scope Hoisting来剔除多余代码
useExports(通过标记某些函数是否被使用，之后通过Terser来进行优化)
usedExports只需要将usedExports设为true；使用之后，没被用上的代码在webpack打包中会加入unused
harmony export mul注释，用来告知 Terser 在优化时，可以删除掉这段代码
module.exports = {...optimization:{usedExports:true;}
}
sideEffects(跳过整个模块/文件)，直接查看该文件是否有副作用
sideEffects配置方法在package.json中设置sideEffects属性，如果sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports。如果有些文件需要保留，可以设置为数组的形式。
"sideEffecis":["./src/util/format.js","*.css" // 所有的css文件
]
代码分离
将代码分离到不同的bundle中，之后可以按需加载，或者并行加载这些文件。默认情况下，所有的JS代码在首页全部加载，会影响到首页的加载速度。代码可以分出更小的bundle，以及控制资源加载的优先级，提供代码的加载性能。通过插件splitChunksPlugin来实现。
module.exports = {...optimization:{splitChunks:{chunks:"all"}}
}
内联chunk
可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内嵌到html
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {...plugin:[new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/]
}
优化loader配置
在使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader
如采用 ES6 的项目为例，在配置 babel-loader时，可以这样：
module.exports = {module: {rules: [{// 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能test: /\.js$/,// babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启use: ['babel-loader?cacheDirectory'],// 只对项目根目录下的 src 目录中的文件采用 babel-loaderinclude: path.resolve(__dirname, 'src'),},]},
};
使用 resolve.extensions
在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库， resolve可以帮助webpack从每个
require/import 语句中，找到需要引入到合适的模块代码通过resolve.extensions是解析到文件时自动添加拓展名，默认情况如下：
module.exports = {...extensions:[".warm",".mjs",".js",".json"]
}
当我们引入文件的时候，若没有文件后缀名，则会根据数组内的值依次查找
当我们配置的时候，则不要随便把所有后缀都写在里面，这会调用多次文件的查找，这样就会减慢打包速度
优化 resolve.modules
resolve.modules 用于配置 webpack
去哪些目录下寻找第三方模块。默认值为[‘node_modules’]，所以默认会从node_modules中查找文件
当安装的第三方模块都放在项目根目录下的 ./node_modules目录下时，所以可以指明存放第三方模块的绝对路径，以减少寻找，配置如下：
module.exports = {resolve: {// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤// 其中 __dirname 表示当前工作目录，也就是项目根目录modules: [path.resolve(__dirname, 'node_modules')]},
};
优化 resolve.alias
alias给一些常用的路径起一个别名，特别当我们的项目目录结构比较深的时候，一个文件的路径可能是./…/…/的形式
通过配置alias以减少查找过程
module.exports = {...resolve:{alias:{"@":path.resolve(__dirname,'./src')}}
}
使用 DLLPlugin 插件
利用DllPlugin和DllReferencePlugin预编译资源模块
通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
使用步骤分成两部分：
- 打包一个 DLL 库
- 引入 DLL 库
打包一个 DLL 库
webpack内置了一个DllPlugin可以帮助我们打包一个DLL的库文件
module.exports = {...plugins:[new webpack.DllPlugin({name:'dll_[name]',path:path.resolve(__dirname,"./dll/[name].mainfest.json")})]
}
引入 DLL 库
使用 webpack 自带的 DllReferencePlugin 插件对 mainfest.json
映射文件进行分析，获取要使用的DLL库，然后再通过AddAssetHtmlPlugin插件，将我们打包的DLL库引入到Html模块中
module.exports = {...new webpack.DllReferencePlugin({context:path.resolve(__dirname,"./dll/dll_react.js"),mainfest:path.resolve(__dirname,"./dll/react.mainfest.json")}),new AddAssetHtmlPlugin({outputPath:"./auto",filepath:path.resolve(__dirname,"./dll/dll_react.js")})
}
使用 cache-loader
在一些性能开销较大的 loader之前添加 cache-loader，以将结果缓存到磁盘里，显著提升二次构建速度
保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此loader
module.exports = {module: {rules: [{test: /\.ext$/,use: ['cache-loader', ...loaders],include: path.resolve('src'),},],},
};
terser 启动多线程
使用多进程并行运行来提高构建速度
module.exports = {optimization: {minimizer: [new TerserPlugin({parallel: true,}),],},
};
