一、source-map
source-map查错
配置sourve-map之前先要配置css兼容性写法
source-map：一种提供源代码到构建后代码的映射的技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
借助上一章例子来演示：详情请参考webpack打包保姆级教程01
在webpack.config.js中添加devtool:'source-map'
devtool: 'eval-source-map'
添加了俩排错文件map
二、oneOf
加快打包速度，把rules里面的所有内容用{oneOf：[]}
再次运行
npx webpack-dev-server
三、安装jQuery插件并对jQuery进行打包
npm install jquery --save-dev
引入jQuery：
import $ from 'jquery'; console.log($);
进行打包：
在node_moddules文件夹中发现已经有了jQuery即为成功
运行一下：
npx webpack-dev-server
但是如果引入过多的文件比如图表啊unitApp等一系列文件会导致main.js特别大，打开速度也会随之变慢。这时需要解决一下
四、externals
externals：让某些库不打包。
webpack.config.js 中配置：用的时候把注释给删掉
externals: { // 拒绝jQuery被打包进来(通过cdn引入，速度会快一些) // 忽略的库名 -- npm包名 jquery: 'jQuery' }
然后需要在 index.html 中通过 cdn 来引入：
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
引入jquery.js库可以用猫云进行获取路径
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
可以通过npx webpack-dev-server 来运行并查看大小
压缩前：main.js为555kib
压缩后：main.js为 273kib
五、对css文件进行打包压缩
npm install css-minimizer-webpack-plugin --save-dev const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//压缩css new CssMinimizerPlugin(),//新的压缩css方法
打包即可
六、webpack性能优化-tree shaking(树摇)
tree shaking：去除应用程序中没有使用到的无用代码
前提：
1、使用 ES6 模块化
比如可以使用import，export。 require不可以
2、开启 **production**环境
这样就会自动把无用代码去掉
作用：减少代码体积
如果js代码中引入add，没有引入mul。但是都被打包进来，说明这里就是有问题的
解决方法：通过树摇来去除无用代码
回到编辑器，在mathUtils.js中注释之前的代码
分别写入ES6语法
export function add(num1,num2){ return num1 + num2 } export function mul(num1,num2){ return num1 * num2 }
如果这里是development
process.env.NODE_ENV = 'developent'
这里来打包一下是不是可以打包出来
可以看到已经成功打包完成，但是这里只想引入add，并不想引入mul。需要通过树摇来引入
把mode换成production
打包一下，可以看到里面是存在mul
这里再注释mul
再次打包，会发现已经找不到mul了
而且会自动清除你的注释
在 package.json 中配置：
"sideEffects": false表示所有代码都没有副作用（都可以进行 tree shaking）
这样会导致的问题：可能会把 css / @babel/polyfill 文件排挤掉（副作用）
所以可以配置"sideEffects": ["*.css", "*.less"]：不会对css/less文件tree shaking处理
七、code split（代码分割）
为什么要使用代码分割？
在vue单页应用中，若不做任何处理，所有vue文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，能够提高页面首次进入的速度，网站性能也能够得到提升。
随着应用扩展，包（bunle）会越来越大。尤其是如果引入了庞大的第三方库。你必须留意你引入的包的大小。防止你打包之后，app加载需要太长时间。
为了防止弄出来一个大包，代码分割是一个比较好的解决办法。代码分割是Webpack和Browserify（通过factor-bundle）的一个特性。允许创建多个包，然后在运行时(runtime)加载。
代码分割可以帮助App实现『懒加载』当前用户需要的那一部分，而不必全部加载。这样动态加载能提高应用性能表现。
简单来说就是把一个js分割成多个小js然后同时运行，类似于异步操作
第一种方法：多入口拆分
把mathUitls.js名字也放入其webpack.config.js的入口文件中：
entry: { index: './src/index.js', mathUtils: './src/mathUtils.js' },
output: { // [name]：取文件名 filename: 'js/[name].[contenthash:10].js', path: path.resolve(__dirname, 'dist') },
打包完成后即可分离开来
第二种方法：optimization
optimization: { splitChunks: { chunks: 'all' } },
all：把所有的东西全部拆开
！！！注意：
因为在项目中通常只会引入一个入口文件。
这样就可以打包了
output.filename 的输出文件名是 [name].min.js，[name] 根据 entry 的配置推断为 index，所以输出为 index.min.js；
第三种方法：import动态导入语法
如果是普通打包的话会将mathUtils.js文件打包到index.js文件里
所以我们可以使用动态导入语法去把它单独导出来
import('./mathUtils').then(({add,mul})=>{ console.log(add(300,200)); }).catch(()=>{ console.log('文件加载失败'); })
再次进行打包
但是这里会发现只看名字并不能分清楚哪个对哪个
所以要以注释的方式添加一个webpackChunkName
/*webpackChunkName:'mathUtils'*/ webpackChunkName:指定test单独打包后文件的名字 import(/*webpackChunkName:'mathUtils'*/'./mathUtils').then(({add,mul})=>{ console.log(add(300,200)); }).catch(()=>{ console.log('文件加载失败'); })
再次打包npm run build
可以看到名字已经更改完成
