# webpack-template

**Repository Path**: programmer_luosx/webpack-template

## Basic Information

- **Project Name**: webpack-template
- **Description**: webpack template
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: optimize
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-09
- **Last Updated**: 2023-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webpack, webpack优化

## README

### [参考webpack官网](https://www.webpackjs.com/concepts/)

#### webpack优化：
1、提升开发体验
2、提升打包构建速度
3、减少代码体积
4、优化代码运行性能

##### sourceMap
源代码映射，方便浏览器定位排查代码错误
开发模式：devtool: "cheap-module-source-map"  行映射
生产模式：devtool: "source-map"  行列都映射

##### HotModuleReplacement 热更新
HMR 热模块替换，提升dev构建速度

！js 热更新需要手动编写
if(module.hot){ 
  module.hot.accept("./js/addtion.js")
  module.hot.accept("./js/myReduce.js", fn)
}

vue-loader，react-loader实现了js热更新

##### Rule.oneOf
规则匹配时，只使用第一个匹配规则

##### include/exclude
包含与排除，一般是排除第三方导入的包
指定需要包含或者需要排除的文件目录

##### cache
缓存生成的 webpack 模块和 chunk，来改善构建速度
每次打包JS文件都要经过eslint检查和babel编译，通过缓存减少不必要的操作

##### 多进程打包
thread-loader
如果打包特别耗时，可以开启多进程提升打包速度

##### 压缩JS
terser-webpack-plugin
使用 terser 来压缩 JavaScript

##### 移除JS上下文中的未引用代码
Tree Shaking
依赖于ES2015模块语法(ES Module)的静态结构特性
webpack默认开启了这个功能

##### 减少babel生成文件体积
@babel/plugin-transform-runtime
babel为每个编译的文件都插入了辅助代码，使代码体积过大
Babel对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中
可以引入Babel runtime作为一个独立模块，来避免重复引入

##### 图片压缩  !依赖未完成
image-minimizer-webpack-plugin
无损压缩 imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo
有损压缩 imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo 

##### codeSplit
打包时将所有js打包到一个文件中，体积太大，如果只渲染首页，就应该只加载首页js文件
所以需要将打包文件分割，生成多个js文件，按需加载js文件

1、多入口 对应 对输出
2、当多个文件依赖同一个js时，会重复添加
  splitChunks 代码分割配置
3、按需加载js
  import 动态导入
  import('xx.js').then().catch()
4、spa单页应用，只有一个入口文件
5、output统一命名规则

##### preload / prefetch 动态加载
preload 立即加载
  加载优先级高，只能加载当前页面需要使用的资源
prefetch 空闲时加载
  优先级低，可以加载当前界面资源，也可以加载下个界面需要的资源
存在的问题：两者兼容性都差，Proload兼容性较好

##### runtimeChunk
模块间相互依赖时，一个模块的hash变化，依赖的也要发生变化，进行了不必要操作
设置optimization.runtimeChunk，可以更好的做缓存减少文件更新

##### contenthash 命名
内容变化才更新文件命名

##### core-js 解决JS兼容性问题
import 'core-js'  全部兼容性处理引入，但会导致包体积变大
import 'core-js/es/promise' 按需引入promise兼容性处理
当按需加载多时，手动引入太麻烦，通过babel预设实现按需引入

##### PWA 渐进式网络应用程序
workbox
开发web项目一旦网络离线，就没法访问了，通过PWA实现离线访问体验
提供类似原生应用体验的web app技术，内部通过service workers技术实现

与serve配合使用
npm i serve -g  //安装serve
serve dist    //运行serve 并指定运行的目录为dist