webpack性能优化
- 开发环境性能优化
- 生产环境性能优化
开发环境性能优化
- 优化打包构建速度
- 优化调试功能
生产环境性能优化
- 优化打包构建速度
- 优化代码运行的性能
开发环境调试代码 source-map
sourcemap是一种技术，提供源代码到构建后代码的映射。（如果构建后代码出错了，通过映射关系，可以追踪到源代码错误）
生产环境webpack缓存
hash: 每个文件都生成自己的hash
chunkhash： 每个代码块都生成一个hash
contenthash： 每个资源都会生成自己hash 如果js资源改变只生成js资源的hash 不会影响css资源。这个是webpack缓存的主要实现方式。
tree shaking
主要是用来剔除无用的资源，没有用到的代码 减少打包体积
条件 production es6模块化
在package.json中
- sideEffects: false 代表所有代码都没有副作用 都可以进行tree shaking 会把css干掉
- sideEffects: [".css", ".less"]
code split 代码分割
主要研究js代码的代码分割
1.根据入口文件代码分割
{
// 多入口代码分割 可以进行多页面应用
entry: {
main: './src/js/index.js',
test: './scr/js/test.js',
}
}
2.optimization分割
webpack配置如下代码，主要用于将node_modules中的代码单独打包成1个chunk 最终输出
将别人的第三方的东西拿出来单独打包
而且会分析多入口文件中有没有公共的依赖，如果有，会打包成单独的一个chunk
optimization: {
splitChunks: {
chunks: 'all'
}
}
3.import()函数代码分割
懒加载 预加载
懒加载
一般用import()函数进行懒加载 事件中加载，then方法再处理逻辑
document.getElementById("btn").onclick = function() {
// 懒加载
import(/* webpackChunkName: 'test' */'./test').then((mul) => {
console.log(mul(4, 5))
})
}
预加载
webpackPrefetch: true 预加载
document.getElementById("btn").onclick = function() {
// 懒加载
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then((mul) => {
console.log(mul(4, 5))
})
}
PWA 渐进式网络开发
利用workbox
webpack中利用workbox-webpack-plugin
const workboxWebpackPlugin = require('workbox-webpack-plugin')
new workboxWebpackPlugin.GenerateSW({
clientsClaim: true, // 帮助serviceworker快速启动 删除旧的serviceworker
skipWaiting: true // 跳过等待
})
判断serviceworker是否可用
// 在项目入口
if ('serviceworker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceworker.register('/service-worker.js').then(() => {
console.log('注册成功');
}).catch(
console.log('注册失败');
)
})
}
多进程打包
webpack4 用 thread-loader
webpack5不用这样
externals 防止某些依赖打包进我们的项目
比如jquery 我们需要用cdn 就用webpack的externals属性来让其不打包进项目
{
externals: {
jquery: 'jQuery'
}
}
dll 动态连接库
会告知webpack哪些库是不需要打包的，单独弄出来打包成另外的资源。