webpack将所有打包成一个文件，但并不是所有代码都需要在第一时间显示，但所有代码需要全部下载完才能执行渲染，为了提高首屏渲染速度，我们经常会对webpack进行分包处理，按需加载

#一。：代码分离 | Code Splitting

https://cloud.tencent.com/developer/article/2117348?areaSource=102001.14&traceId=WnLDr9RdY5uZaxM4hLwQC

https://www.cnblogs.com/zw100655/p/16472074.html
https://cloud.tencent.com/developer/article/2371707?areaId=106001

https://www.51cto.com/article/689344.html

https://mp.weixin.qq.com/s/dFrRY_ntUwmIOXzs8TYcFQ
https://www.cnblogs.com/kwzm/p/10314438.html

https://blog.51cto.com/zhoulujun/6129741

https://blog.csdn.net/qq_21567385/article/details/107634781

https://blog.csdn.net/Kimser/article/details/129524862

https://cloud.tencent.com/developer/article/2285316?areaId=106001 //dll方法

https://www.jianshu.com/p/6863d949279e //dll

https://blog.csdn.net/qq_21567385/article/details/107634781 //element-admin vue.config.js

https://zhuanlan.zhihu.com/p/617547106 //缓存 noParse loader范围

https://mp.weixin.qq.com/s?__biz=Mzg3OTYwMjcxMA==&mid=2247484819&idx=1&sn=7ce2c5d905ee985371751f5e72569905&chksm=cf00b8eaf87731fc6ecdc3d3291e896a3038be10b74a8ce6efe52b61af340d7b30482d9f504b&cur_album_id=1856066636953272321&scene=189&poc_token=HPCYm2WjJEG6Jz4UeU03msf5MRUUjtFgA7_D7T1t   //提升编译性能

https://blog.csdn.net/helloxiaoliang/article/details/119112041  //时间结果

https://juejin.cn/post/6911519627772329991?searchId=2024010909574016BEA84F7EBB82638195#heading-12

//前端性能优化
https://juejin.cn/post/7194400984490049573?searchId=20231226134932E334D24F4998F75EA736#heading-29  
https://juejin.cn/post/6911472693405548557?searchId=20231226134932E334D24F4998F75EA736#heading-33


https://zhuanlan.zhihu.com/p/179077052 //dll
https://blog.csdn.net/weixin_41192489/article/details/112635196 //# vue 配置【详解】 vue.config.js （ 含 webpack 配置 ）

https://www.cnblogs.com/whh666/p/16669526.html    //# [vue.config.js 的完整配置 ]

在研究splitChunks之前，我们必须先弄明白 module、chunk和bundle 这三个名词是什么意思：

module：就是js的模块化webpack支持commonJS、ES6等模块化规范，简单来说就是你通过import语句引入的代码。
chunk: chunk是webpack根据功能拆分出来的，包含三种情况：
- 你的项目入口（entry）
- 通过import()动态引入的代码
- 通过splitChunks拆分出来的代码
  chunk包含着module，可能是一对多也可能是一对一。
bundle：bundle是webpack打包之后的各个文件，一般就是和chunk是一对一的关系，bundle就是对chunk进行编译压缩打包等处理之后的产出。

把代码分离到不同的 bundle（包）中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间

对于非入口文件重复打包的解决：

juejin.cn/post/684490…

#二： runtime.js 处理策略

runtime是运行时代码，作用是连接模块之间的逻辑，和解析。默认情况是包含在 build 后的 app.hash.js 内的，如果我们改动其他路由，就会导致 runtime 代码改变。从而不光我们改动的路由对应的页面 js 会变，含 runtime 代码的 app.hash.js 也会变，对用户体验是非常不友好的。

为了解决这个问题要设定 runtime 代码单独抽取打包：

config.optimization.runtimeChunk('single')

但是 runtime 代码由于只是驱动不同路由页面的关系，代码量比较少，请求 js 的时间都大于执行时间了，所以使用 script-ext-html-webpack-plugin 插件将其内链在 index.html 中比较友好。

script-ext-html-webpack-plugin

该插件需要在 html-webpack-plugin 插件初始化后运行，还需要安装 html-webpack-plugin：

yarn add -D html-webpack-plugin script-ext-html-webpack-plugin

接下来使用链式 webpack 语法配置 script-ext-html-webpack-plugin：

config.plugin('ScriptExtHtmlWebpackPlugin')
      .after('html')
      .use('script-ext-html-webpack-plugin', [
        {
          // `runtime` must same as runtimeChunk name. default is `runtime`
          inline: /runtime\..*\.js$/
        }
       ])
      .end()

#三：webpack对js、css压缩需后端配合

blog.51cto.com/u_15686949/…

3.1 图片优化

通常我们的代码体积会比图片体积小很多，有的时候整个页面的代码都不如一张头图大。好在图片资源不会阻塞浏览器渲染，但是不合理的图片大小也会消耗一定的代码。可以使用：url-loader、svg-url-loader 和 image-webpack-loader 来优化图片，还可以使用雪碧图来优化图片资源

url-loader 可以按照配置将小于一定体积的静态文件内联进我们的应用。当我们指定了 limit 这个 options 选项，它会将文件编码成比无配置更小的 Base64 的数据 url 并将该 url 返回，这样可以将图片内联进 JavaScript 代码中，并节省一次 HTTP 请求

对于大图片来说，可以使用 image-webpack-loader 来压缩图片，image-webpack-loader 它支持 JPG、PNG、GIF 和 SVG格式的图片，因此我们在碰到所有这些类型的图片都会使用它。

// 大图片压缩
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        bypassOnDebug: true
      })
      .end()

#四：提升构建编译速度

1:优化loader,对没有AMD/CommonJS规范版本的不进行转化编译

configureWebpack：{
    module: {
    //如果一些第三方模块没有AMD/CommonJS规范版本，可以使用 noParse 来标识这个模块，
    //这样 Webpack 会引入这些模块，但是不进行转化和解析，从而提升 Webpack 的构建性能 ，例如jquery 、lodash。
          noParse: /^(lodash|moment|xe-utils|xlsx|ali-oss)$/,
          rules: []
       }
}

2:优化loader查找范围

在使用预处理器解析模块时，有两个配置项可以额外配置:exclude 与include，exclude 可以排除不需要该预处理器解析的文件目录，include 可以设置该预处理器只对哪些目录生效，这样可以碱少不需要被预处理器处理的文件模块，从而提升构建速度。

  module: {
    rules: [
      {
        test: /.(ts|tsx)$/i,
        loader: 'ts-loader',
        exclude: ['/node_modules/'],
      },
      {
      test: /\.js[x]?$/,
      use: ['babel-loader'],
      include: [path.resolve(__dirname, 'src')]
      }

    ],
  },

3：多进程打包、多进程压缩

   thread-loader多进程打包  terser-webpack-plugin多进程压缩
   参考：https://juejin.cn/post/6911519627772329991?searchId=2024010909574016BEA84F7EBB82638195#heading-8

4：使用缓存

mp.weixin.qq.com/s?__biz=Mzg…

# Vue 项目性能优化 — 实践指南（网上最全 / 详细）