优化单独打包 runtime

webpack.config.js

...
module.exports={
    mode:mode
  ...
  optimization:{
        runtimeChunk:'single'  //运行时文件 单独打包
    }
  ...
}
...

为什么？

• runtime代码是让main.js运行在IE的代码
• 单独打包后，升级webpack或改配置每次重新打包
• 只会把index.js 打包成main.xxx.js
• 额外的代码 .js 打包成runtime.xxx.js
• 这种情况下只要index内容不变，用户缓存的main.xxx.js代码就不会变
• 无需额外下载文件

如果不单独打包，那么修改webpack配置会导致用户的缓存失效，必须重新下载main.js
单独打包，只要不改自己的代码，main.js就不需要重新下载，节省带宽

优化 用splitChunks 将 node 依赖单独打包

webpack.config.js

...
module.exports={
    mode:mode
  ...
  optimization:{
        runtimeChunk:'single',  //运行时文件 单独打包
        splitChunks: {
        cacheGroups: {
          vendor: {
            minSize: 0,
                      /* 如果不写 0，由于 React 文件尺寸太小，会直接跳过 */
            test: /[\\/]node_modules[\\/]/, 
                      // 为了匹配 /node_modules/ 或 \node_modules\
            name: 'vendors', // 文件名
            chunks: 'all',  
                      // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
            /*  这三行的整体意思就是把两种加载方式的来自
                              node_modules 目录的文件打包为 vendors.xxx.js其中 vendors 是第三方的意思
            */
          }
          },
    },    
    }
  ...
}
...

优化 固定 moduleIds

https://webpack.js.org/configuration/optimization/#optimizationmoduleids

...
module.exports={
    mode:mode
  ...
  optimization:{
      moduleIds:'deterministic',
        ...
    }
  ...
}
...

保证某个模块代码消失，后面的文件id也是不变的

Webpack 多页面

const HtmlWebpackPlugin = require('html-webpack-plugin')
...
module.exports={
  mode:mode,
  ...
  entry:{
      main:'./src/index.js',
    admin:'./src/admin.js'
  },
  plugins:[
    ...
    new HtmlWebpackPlugin({
        filename:'index.html', //index.html
      chunks:['main']
    }),   
    new HtmlWebpackPlugin({
        filename:'admin.html',
      chunks:['admin']       //引入的js
    })
  ].filter(Boolean),
  ...
  module:{
    ...
  }
}
...

优化 common 插件

• 使用多页面就要用 common chunks共有文件
• 比如一个文件被多个js引用后，为了防止打包后被重复引用
• 这样共有文件更改就只需要打包一次

  ...
  module.exports={
    mode:mode
  ...
  optimization:{
        runtimeChunk:'single',  //运行时文件 单独打包
        splitChunks: {
        cacheGroups: {
          vendor: {
                      priority:10,//优先级
            minSize: 0,
                      /* 如果不写 0，由于 React 文件尺寸太小，会直接跳过 */
            test: /[\\/]node_modules[\\/]/, 
                      // 为了匹配 /node_modules/ 或 \node_modules\
            name: 'vendors', // 文件名
            chunks: 'all',  
                      // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
            /*  这三行的整体意思就是把两种加载方式的来自
                              node_modules 目录的文件打包为 vendors.xxx.js其中 vendors 是第三方的意思
            */
          },
                  common:{
                priority:5,//优先级
              minSize:0,
              minChunks:2,
              chunks:'all',
              name:'common'    
          }
          },
    },    
    }
  ...
  }
  ...

  代码分隔

  runtime
  node_modules-vendor 全局
  common 模块
  self(main/admin) 自身