webpack代码分离

什么情况下考虑

• 第三方库 可以放到cdn中
• 懒加载 先了解加载，加载分为静态加载和动态加载

动态加载：CommonJS require函数和es的import函数

// require函数
if () {
    require("xx.js");
}

// import 函数
import("xx.js")

静态加载：ES import语法糖

// 声明式
import aa from "a.js"

常用代码分离

官网地址

项目代码

代码包分析插件 BundleAnalyzerPlugin

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    // ...
    plugin: [
        new BundleAnalyzerPlugin()
    ]
}

可以看到，a.js和b.js文件都引用了loadsh.js文件。这个时候需要处理的就是把loadsh.js文件split出来

optimization.splitChunks

这个是在webpack4开始，引入的配置方法.官网地址

// 这个是官方下面的配置，只是修改了chunks
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'inital',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};