18.配置总结

[webVueBlog]

想让源文件加入到构建流程中去被 Webpack 控制，配置 entry。

想自定义输出文件的位置和名称，配置 output。

想自定义寻找依赖模块时的策略，配置 resolve。

想自定义解析和转换文件的策略，配置 module，通常是配置 module.rules 里的 Loader。

其它的大部分需求可能要通过 Plugin 去实现，配置 plugin。

webpack对代码分割功能的实现方式：

多入口分割：entry

防止重复：使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk。

动态导入：使用es module的import方法和wepack独有的require.ensure

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',// 指明要分割的插件类型, async:异步插件(动态导入),inital:同步插件,all：全部类型
      minSize: 20000,// 文件最小大小,单位bite;即超过minSize有可能被分割；
      minRemainingSize: 0,// webpack5新属性，防止0尺寸的chunk
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,// webpack4,5区别较大
      maxInitialRequests: 30,// webpack4,5区别较大
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

前端优化无外乎做两件事：

优化用户体验减少首屏加载时间

提升各项交互的流畅度，如表单验证和页面切换

优化开发体验

减少构建耗时

自动化完成一些重复工作，解放生产力，脚手架是代表性产物

webpack 提供了模块化项目中最主要的优化手段：

提取公共代码

按需加载（懒加载）

SplitChunksPlugin 引入缓存组（cacheGroups）对模块（module）进行分组，每个缓存组根据规则将匹配到的模块分配到代码块（chunk）中，每个缓存组的打包结果可以是单一 chunk，也可以是多个 chunk。

module.exports = {
  //...
  optimization: {
    splitChunks: {
      //在cacheGroups外层的属性设定适用于所有缓存组，不过每个缓存组内部可以重设这些属性
      chunks: "async", //将什么类型的代码块用于分割，三选一： "initial"：入口代码块 | "all"：全部 | "async"：按需加载的代码块
      minSize: 30000, //大小超过30kb的模块才会被提取
      maxSize: 0, //只是提示，可以被违反，会尽量将chunk分的比maxSize小，当设为0代表能分则分，分不了不会强制
      minChunks: 1, //某个模块至少被多少代码块引用，才会被提取成新的chunk
      maxAsyncRequests: 5, //分割后，按需加载的代码块最多允许的并行请求数，在webpack5里默认值变为6
      maxInitialRequests: 3, //分割后，入口代码块最多允许的并行请求数，在webpack5里默认值变为4
      automaticNameDelimiter: "~", //代码块命名分割符
      name: true, //每个缓存组打包得到的代码块的名称
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, //匹配node_modules中的模块
          priority: -10, //优先级，当模块同时命中多个缓存组的规则时，分配到优先级高的缓存组
        },
        default: {
          minChunks: 2, //覆盖外层的全局属性
          priority: -20,
          reuseExistingChunk: true, //是否复用已经从原代码块中分割出来的模块
        },
      },
    },
  },
};

"@vue/cli": "^4.5.9",

"webpack": "^4.43.0",

"vue": "^2.6.11",

entry：js入口源文件
output：生成文件
module：进行字符串的处理
resolve：文件路径的指向
plugins：插件，比loader更强大，能使用更多webpack的api

处理样式，转成css，如：less-loader, sass-loader

图片处理，如: url-loader, file-loader。两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中

处理js，将es6或更高级的代码转成es5的代码。如：
babel-loader，babel-preset-es2015，babel-preset-react

将js模块暴露到全局，如果expose-loader

代码热替换, HotModuleReplacementPlugin

生成html文件，HtmlWebpackPlugin

将css成生文件，而非内联，ExtractTextPlugin

报错但不退出webpack进程，NoErrorsPlugin

代码丑化，UglifyJsPlugin，开发过程中不建议打开

多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin

清理文件夹，Clean

调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来

config.optimization.splitChunks({
     chunks: "async", // 必须三选一： "initial" | "all"(推荐) | "async" (默认就是async)
     minSize: 30000, // 最小尺寸，30000
     minChunks: 1, // 最小 chunk ，默认1
     maxAsyncRequests: 5, // 最大异步请求数， 默认5
     maxInitialRequests : 3, // 最大初始化请求书，默认3
     automaticNameDelimiter: '~',// 打包分隔符
     name: function(){}, // 打包后的名称，此选项可接收 function
     cacheGroups:{ // 这里开始设置缓存的 chunks
         priority: 0, // 缓存组优先级
         vendor: { // key 为entry中定义的 入口名称
             chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是async)
             test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
             name: "vendor", // 要缓存的 分隔出来的 chunk 名称
             minSize: 30000,
             minChunks: 1,
             enforce: true,
             maxAsyncRequests: 5, // 最大异步请求数， 默认1
             maxInitialRequests : 3, // 最大初始化请求书，默认1
             reuseExistingChunk: true // 可设置是否重用该chunk
         }
     }
});


使用when做条件配置


consif.when(condition,truthyFunc,falsyFunc)

// 一个例子，当构建生产包时添加minify插件，否则设置构建类型为source-map
// devtool请见：https://www.webpackjs.com/configuration/devtool/
config
  .when(process.env.NODE_ENV === 'production',
    config => config.plugin('minify').use(BabiliWebpackPlugin),
    config => config.devtool('source-map')
  );

compression-webpack-plugin

style-resources-loader

performance 性能

config.performance
  .hints(hints)//false | "error" | "warning"。打开/关闭提示
  .maxEntrypointSize(maxEntrypointSize)//入口起点表示针对指定的入口，对于所有资源，要充分利用初始加载时(initial load time)期间。此选项根据入口起点的最大体积，控制 webpack 何时生成性能提示。默认值是：250000
  .maxAssetSize(maxAssetSize)//资源(asset)是从 webpack 生成的任何文件。此选项根据单个资源体积，控制 webpack 何时生成性能提示。默认值是：250000
  .assetFilter(assetFilter)//此属性允许 webpack 控制用于计算性能提示的文件

Lighthouse生成的是一个报告，会给你的页面跑出一个分数来。 分别是页面性能（performance）、Progressive（渐进式 Web 应用）、Accessibility（可访问性）、Best Practices（最佳实践）、SEO 五项指标的跑分。甚至针对我们的性能问题给出了可行的建议、以及每一项优化操作预期会帮我们节省的时间。这份报告的可操作性是很强的——我们只需要对着 LightHouse 给出的建议，一条一条地去尝试，就可以看到自己的页面，在一秒一秒地变快。

Remove unused CSS 或者 Remove unused JavaScript（移除无用的js和css）

Serve static assets with an efficient cache policy（为静态资源提供缓存）

对于不常改变的静态资源比如说css、image等可以进行缓存，针对缓存也总结了一下，可以看看

打开ngnix配置文件，把缓存配上（这里粗暴把js和css缓存了，实际项目根据实际需要配置缓存）

脚本评估

• 优化第三方JavaScript
• 消除您的输入处理程序
• 使用网络工作者

样式和布局

• 减少样式计算的范围和复杂性
• 避免大型，复杂的布局和布局颠簸

渲染

• 坚持只使用合成器属性并管理层数
• 简化paint复杂性并减少paint面积

解析HTML和CSS

• 提取关键CSS
• 缩小CSS
• 推迟非关键CSS

脚本解析和编译

• 通过代码拆分减少JavaScript负载
• 删除未使用的代码

设置延迟加载非关键CSS

webpack设置 html-critical-webpack-plugin

减少js的执行时间

当JavaScript执行时间超过2秒时，Lighthouse将显示警告。执行时间超过3.5秒时，审核将失败

建议（这些webpack都有相关的配置）：

• 拆分代码。
• 缩小并压缩代码
• 删除未使用的代码 (tree shaking)
• 使用缓存代码

减少网络负载方法

• 将请求推迟到需要时再发送。
• 最小化和压缩网络负载。
• 对图像使用WebP而不是JPEG或PNG（图片要求不严格，可以压缩体积，我常用的在线压缩网站tinypng.com/）。
• 将JPEG图像的压缩级别设置为85。
• 缓存请求，以使页面在重复访问时不会重新下载资源。（请参阅“网络可靠性”登录页面，以了解缓存的工作原理以及实现方法。）

预加载&&延迟加载

preload ：是一种声明式的资源获取请求方式，用于提前加载一些需要的依赖，并且不会影响页面的onload事件。通过在HTML文档的开头添加标记rel="preload"来预加载关键资源，浏览器为资源设置了更合适的优先级，如果as属性被省略，那么该请求将会当做异步请求处理：
<link rel="preload" as="style" href="css/style.css">

prefetch ：是一种利用浏览器的空闲时间加载页面将来可能用到的资源的一种机制；通常可以用于加载非首页的其他页面所需要的资源，以便加快后续页面的首屏速度；

延迟加载 ：是一种根据需要而不是预先加载资源的策略。这种方法在初始页面加载期间释放了资源，并避免了加载从未使用过的资产。

图片设置宽高

始终在图像和视频元素上包括width和设置height尺寸属性。以确保在浏览器开始获取图像之前在页面上分配了足够的空间。这将最大程度地减少回流和重新布局。

<img src="puppy.jpg" width="640" height="360" alt="xxx" />

缩小CSS: 对于Webpack：optimize-css-assets-webpack-plugin