webpack打包优化
webpack打包优化
开发环境优化
1.开启热模块替换（HMR）
**原因：**如果不开启 HMR功能 的话，修改某一个模块的时候，所有模块都会重新打包
实现：
给devServer添加 hot:true
hot:true
给js添加HMR功能（除了入口文件以外）
在入口js里监听需要热替换的js文件
if (module.hot) {
// 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
module.hot.accept('./print.js', function() {
// 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
// 会执行后面的回调函数
print();
});
}
**tips：**css的 style-loader默认开启了HMR，这就是为啥开发环境需要使用style-loader
html因为只有一个，所以不用开启HMR
2.使用 source-map 进行源代码映射
**原因：**代码打包后如果报错，因为代码都被打包了，无法快速找到是哪一行代码的问题，所以需要源代码映射
实现：
在webpack.config.js 里添加 devtool：‘eval-source-map’
/*
source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
source-map：外部
错误代码准确信息 和 源代码的错误位置
inline-source-map：内联
只生成一个内联source-map
错误代码准确信息 和 源代码的错误位置
hidden-source-map：外部
错误代码错误原因，但是没有错误位置
不能追踪源代码错误，只能提示到构建后代码的错误位置
eval-source-map：内联
每一个文件都生成对应的source-map，都在eval
错误代码准确信息 和 源代码的错误位置
nosources-source-map：外部
错误代码准确信息, 但是没有任何源代码信息
cheap-source-map：外部
错误代码准确信息 和 源代码的错误位置
只能精确的行
cheap-module-source-map：外部
错误代码准确信息 和 源代码的错误位置
module会将loader的source map加入
内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快
开发环境：速度快，调试更友好
速度快(eval>inline>cheap>...)
eval-cheap-souce-map
eval-source-map (vue和react脚手架就是使用的这个)
调试更友好
souce-map
cheap-module-souce-map
cheap-souce-map
--> eval-source-map / eval-cheap-module-souce-map
生产环境：源代码要不要隐藏? 调试要不要更友好
内联会让代码体积变大，所以在生产环境不用内联
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
--> source-map / cheap-module-souce-map
*/
3.将只需要被loader执行一次的规则放到 oneOf 里面去
**原因：**webpack里面有非常多的loader，每遇到一个文件就会调用所有的loader来对它进行匹配，但大多数文件只需要被一个loader所过滤，所以会浪费很多性能
实现：
rules: [
{
oneOf: [
{
test:/..../,
use:[.....]
}
],
},
],
生产环境优化
1.对资源进行缓存
**原因：**在资源没有变动的时候再次向服务器发送请求，直接在缓存里获取数据，类似HMR，但是生产环境是没有HMR的
实现：
在使用babel-loader 处理js文件的时候，options里面进行配置如下代码
// 第二次构建时，会读取之前的缓存
cacheDirectory: true
/*
缓存：
babel缓存
cacheDirectory: true
--> 让第二次打包构建速度更快
文件资源缓存
hash: 每次wepack构建时会生成一个唯一的hash值。
问题: 因为js和css同时使用一个hash值。
如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
问题: js和css的hash值还是一样的
因为css是在js中被引入的，所以同属于一个chunk
contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样
--> 让代码上线运行缓存更好使用
*/
将打包出来的文件名进行定义
filename: 'js/built.[contenthash:10].js'
filename: 'css/built.[contenthash:10].css'
2.使用tree shaking（树摇）
**原因：**tree shaking 可以去除·无用代码，减小代码体积
实现：
/*
tree shaking：去除无用代码
前提：1. 必须使用ES6模块化 2. 开启production环境
作用: 减少代码体积
在package.json中配置
"sideEffects": false 所有代码都没有副作用（都可以进行tree shaking）
问题：可能会把css / @babel/polyfill （副作用）文件干掉
"sideEffects": ["*.css", "*.less"]
*/
3.使用code split 进行代码分割
**原因：**默认情况下webpack 打包代码的时候会把所有的文件打包到一个js文件里，导致该文件过大，加载较慢，所以可以使用代码分割，对文件进行分开打包，并行加载，加载资源的时候就会更快
实现：
方法一：给entry 设置多个入口（不常用）
entry: {
// 多入口：有一个入口，最终输出就有一个bundle
index: './src/js/index.js',
test: './src/js/test.js'
},
方法二：给webpack 配置optimization
/*
1. 可以将node_modules中代码单独打包一个chunk最终输出
2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
*/
optimization: {
splitChunks: {
chunks: 'all'
}
},
方法三：使用import（）代码来进行引入
import(/* webpackChunkName: 'test' */'./test')
.then(({ mul, count }) => {
// 文件加载成功~
// eslint-disable-next-line
console.log(mul(2, 5));
})
.catch(() => {
// eslint-disable-next-line
console.log('文件加载失败~');
});
**tips:**一般是把方法二和方法三一起使用
4.文件懒加载和预加载
**原因：**懒加载可以让文件需要用到的时候才调用，预加载是等其他资源加载完毕之后等浏览器空闲了再进行加载
实现：
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
console.log(mul(4, 5));
});
**tips：**预加载兼容性较差，一般只在PC浏览器版本比较高才使用，移动端和ie慎用
5.多进程打包
胡乱使用容易使打包速度更慢
6.使用PWA（离线加载）
兼容性不好
7.使用externals 忽略某些包，然后通过cdn引入
**原因：**某些包体积过大，影响打包速度和页面加载速度，所以可以把那些包忽略掉，然后调用cdn来用
使用：
在webpack里面配置
externals: {
// 拒绝jQuery被打包进来
jquery: 'jQuery'
}
然后在HTML里面引用外链
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>