1.Tree Shaking
官网详细教程
概念：中文翻译就是摇树，把不需要的叶子都摇下来。具体在代码中指的是，把没有使用到的模块在打包的时候去除掉。
限制：仅支持es6（ impor export）的语法。
详细配置：
package.json配置：
这里代表的就是@babel/polyfill和css文件不需要使用Tree Shaking。如果没有就配置成
“sideEffects”:false
webpack.config.js配置：
2.生成环境与开发环境分别配置
针对项目在不同环境下进行配置。
可以使用不同的文件进行配置。
手写创建一个公共配置文件。把开发环境/生成环境都会用到的放进去
webpack.common.js
然后分别创建开发/生产的配置文件。
webpack.dev.js
webpack.prod.js
番外：不同的文件通过webpack-merge去引入合并就行了。官网教程
3.webpack与Code Splitting（代码分割）
概念：所谓代码分割就是把打包后的一个main.js文件拆分成多个js文件，让js可以多个同时加载。一定程度上可以提升性能。
分类：
（1）同步代码分割。
这里需要运用到webpack的一个的插件官网教程。
在webpack配置文件中添加
（2）异步代码分割
使用es6中的import异步加载js
例子：
function getComponent(){
return import('lodash').then(({default:_})=>{
var element=document.createElement('div')
element.innerHTML=_.join(['a','b','c'],'-');
return element
})
}
getComponent().then(element=>{
document.body.appendChild(element)
})
问题：但是这种语法babel本身识别不了，所以需要安装别的插件。
npm install --save-dev @babel/plugin-syntax-dynamic-import
然后再.babelrc文件中配置
"plugins": ["@babel/plugin-syntax-dynamic-import"]
番外：对于默认生成的0.js，自定义打包后的文件名。
可以进行如下配置：
4.SplitChunksPlugin配置讲解
官网教程
optimization: {
splitChunks: {
chunks: 'all',//有效值为all，async和initial。async/initial只对异步/同步代码进行分割
minSize: 20000,//大于20000才做代码分割
minRemainingSize: 0,
maxSize: 50000,//大于50000做二次代码分割（在可以的情况下 ）
minChunks: 1,//至少使用了一次才做分割
maxAsyncRequests: 30,//最大同时加载模块30个
maxInitialRequests: 30,//首页最多加载模块30个
automaticNameDelimiter: '~',//文件名链接默认符号
enforceSizeThreshold: 50000,//强制执行拆分的大小最大50000
cacheGroups: {//缓存模块组，等待所有模块判断完毕后，再生成文件。
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,//权重。判断文件应该打包到那个js文件中。
name: 'vandors'
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true//忽略掉已经打包过的js
}
}
}
}
5.lazy loading 懒加载，chunk概念
lazy loading 懒加载：其实就是代码异步加载。当用到这一块的代码，才进行引入。
chunk：其实就是代码快，被分割后的代码。
6.打包分析，Preloading，Prefetching
目的：从性能优化来分析，js文件的加载后的利用率需要关注。
当某些js不服务与当前页面的时候，其实可以使用懒加载的方式去处理。
例如：首页上有一个按钮-》点击-》出现弹窗。在页面加载的时候，就同步加载了弹窗里面的js，其实这部分js在首页就没有被利用到。
如何查看代码利用率。
打开控制台-》 ctrl+shift+p -》输入coverage
Preloading与Prefetching
官网地址
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');
//当首页加载完毕后，在空闲的时候偷着加载别的js代码。
import(/* webpackPreload: true */ 'ChartingLibrary');
//首页加载时，就同步加载别的js代码。
所以推荐使用第一种方式进行异步代码引入。
7.css文件的代码分割
官网推荐插件
CssMinimizerWebpack插件
默认在处理css的时候，会把css打包到js文件中。
在某些情况下还是希望生成css文件。就会需要借助上述插件的帮助。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//负责生成css文件。
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');//负责格式化css文件，使css文件更小。
module.exports = {
module: {
loaders: [
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
optimization: {
minimize: true,
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`
new CssMinimizerPlugin(),
],
},
};
8.webpack与浏览器缓存
在项目修改打包后，不做处理的情况+用户已经缓存了文件。会导致新更新的文件不会生效。所以需要运用到hash。每次改动生成不同的文件名，就解决这个问题了。
9.shimming
官网地址
provide-plugin
应用：主要用于处理一些以来库的问题。例如某个文件依赖jquery的$。但是又没有单独引入jquery。这时候就可以使用这个插件了。
具体配置：
plugins: [
new webpack.ProvidePlugin({
$: 'jquery'
})
],
10.全局变量的使用
推荐插件： cross-env
安装：npm i --save-dev cross-env
使用：在执行命令里面添加全局变量。ENV=dev/prod。
接收：process.env.ENV
完整：
module.exports = () => {
const ENV=process.env.ENV
if (ENV === 'dev') {
//执行开发配置文件
}
if (ENV === 'prod') {
//执行生产配置文件
}
console.error('参数错误')
return false
}
"dev": " cross-env ENV=dev webpack serve --config webpack.common.js",
"build": "cross-env ENV=prod webpack --config webpack.common.js"