webpack-太久太久他就看他他今天截图就太久太久他今介绍: webpack是一个模块打包器, 分析项目结构, 处理模

介绍: webpack是一个模块打包器, 分析项目结构, 处理模块化依赖. 转换为浏览器可运行的代码. 构建把一系列前端代码自动化去处理复杂的流程, 解放生产力.
- 代码转换: TS编译成JS, SCSS/LESS编译成CSS
- 文件优化: 压缩JS,CSS,HTML代码, 压缩合并图片
- 代码分割: 提取多个页面的公共代码,提取首屏不需要执行部分的代码让其异步加载.
- 模块合并: 在采用模块化的项目里会有很多个模块和文件, 需要构建功能把模块分类合并成一个文件.
- 自动刷新: 监听本地源代码的变化,自动重新构建, 刷新浏览器.

核心模块

    module.exports = { 
        entry: './src/index.js', //入口
        output: {  //输出文件配置
                path: path.join(__dirname, './dist'), //最终输出文件放置位置 
                filename: 'main.js', //输出文件的名字
        } 
    }

常用的loader有哪些?有什么作用.介绍一两个loader的思路 0. 背景: webpack需要loader处理那些非js文件, 因为webpack只认识js, 通过不同的loader把不同的文件翻译给webpack
1. 常用的loader有哪些?
  - babel-loader: es6转化为es5
  - url-loader: 把图片转换成base64嵌入html
  - css-loader: 加载css, 支持模块化,压缩,文件导入等特性. 对@import()和url()进行处理, 就像js解析import/require一样, 默认生成要改
  - style-loader: 将css插入到dom中,就是处理css-loader导出的模块数组，然后将样式通过style标签或者其他形式插入到DOM中。
常用的plugin有哪些?有什么作用.介绍一两个plugin的思路 0. 背景: - plugin是插件的意思, 主要目的就是解决loader无法实现的事情, loader只是用作于将特定的模块进行转换,而plugin可以用于执行更加广泛的任务, 比如打包优化, 资源管理, 环境变量注入等. - plugin贯穿整个webpack的编译周期, 运行在webpack的不同阶段.
1. 常见的plugin有哪些?
  - html-webpack-plugin: 利用html-webpack-plugin插件自动生成html文件, 并且对打包后的js文件做了一个引入.
  - clean-webpack-plugin: 每次打包的时候,clean-webpack-plugin插件就会自动把上一次打的包删除
webpack层面的性能优化
1. 提高webpack的打包速度
  - 优化loader: 对于loader来说,影响打包效率的首当其冲就是babel. 因为babel会进行转换代码的操作, 项目越大,转换代码越多, 效率就越多. 首先我们可以优化下loader的文件搜索范围(如下,只作用于js文件,排除掉node_modules文件), 另外还可以将babel编译过的文件缓存起来,下次只需要编译更改过的代码文件即可,这样可以大幅度加快打包时间.如设置loader: 'babel-loader?cacheDirectory=true'
```
module.exports = { 
    module: { 
        rules: [ 
            { // js 文件才使用 babel 
                test: /\.js$/, 
                loader: 'babel-loader', 
                // 只在 src 文件夹下查找 
                include: [resolve('src')], 
                // 不会去查找的路径 
                exclude: /node_modules/ 
            } 
        ] 
    } 
}。
```
  - happyPack: 受限于Node的单线程, webpack在打包过程中也是单线程的, 特别是在执行loader的时候, 长时间编译的任务很多, 就会导致等待的情况. happyPack可以将loader的同步执行转换为并行的, 加快打包效率
```
module: {
   loaders: [
     {
         test: /\.js$/,
         include: [resolve('src')],
         exclude: /node_modules/,
         // id 后面的内容对应下面
         loader: 'happypack/loader?id=happybabel'
     }
   ]
 },
 plugins: [
   new HappyPack({
     id: 'happybabel',
     loaders: ['babel-loader?cacheDirectory'],
     // 开启 4 个线程
     threads: 4
   })
 ]
```
  - dllplugin: dllplugin可以将特定的类库提前打包然后引入, 这样可以极大的减少打包类库的次数, 也实现了将公共代码抽离成单独文件
  - 代码压缩: webpack3中一般使用uglifyjs来压缩代码, webpack4中不需要这些操作了, 只需要将mode设置为production就可以默认开启以上功能.
2. 如何减少webpack打包体积
  1. 按需加载: 当使用的时候再去下载对应的文件
  2. scope hoisting: 它会分析模块之间的依赖关系, 尽可能的把打包出来的模块合并到一个函数中, webpack4中要开启这个功能只需要启用optimization.concatenateModules就可以了
  3. tree shaking: 可以实现删除项目中未被引用的代码, 即不会将未使用到的代码其打包到文件中.如果使用webpack4的化,开启生产环境就会自动启动这个优化功能.
3. 如何利用webpack来优化前端性能?(⽤webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运⾏快速⾼效)
  - 压缩代码: 删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件，利⽤ cssnano （css-loader?minimize）来压缩css
  - 利用cdn加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
  - Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
  - Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
  - 提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码
4. 如何提⾼webpack的构建速度？
  1. 多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码
  2. 通过 externals 配置来提取常⽤库
  3. 利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。
  4. 使⽤ Happypack 实现多线程加速编译
  5. 使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
  6. 使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
其他层面的优化
1. CDN(内容分发网络), 一般会托管web资源(包括文本,图片和脚本等), 可供下载的资源(媒体文件等), 利用cdn来加速这些资源的访问.
  - 在性能方面: 1)用户收到的内容来自最近的数据中心, 延迟更低, 内容加载更快. 2) 部分资源请求分给了CDN, 减少了服务器的负载
  - 在安全方面, 有助于防御DDOS攻击, 即通过监控分析异常流量, 限制其请求频率.
2. 懒加载: 也叫延迟加载/按需加载
  - 在比较长的网页中,如果图片都被加载出来, 但用户又只能看到可视窗口那一部分数据, 这样就浪费了性能. 使用图片的懒加载即可解决这样的问题,在滚动屏幕前, 可视化区域外的图片不会进行加载.
  - 使用data-src来储存图片的路径, 在需要加载图片的时候, 将data-src中图片的路径赋值给src
  - window.innerHeights 可视区的高度 scrollTop是滚动过的距离
3. 回流与重绘等
4. 节流与防抖
  - 防抖: 函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
  - 节流: 函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
5. 图片优化
  - 小图使用 base64 格式
  - 不使用图片转而使用css
  - 选择正确的图片格式
    1. 照片用jpeg
    2. 小图用png, 大部分图标可以用svg替代