星散css

星散css：为何要把 CSS 文件星散出来，而不是直接一起打包在 *** 中。最主要的原因是我们希望更好地行使缓存。

extract-text-webpack-plugin

 1. 假设我们原本页面的静态资源都打包成一个 *** 文件，加载页面时虽然只需要加载一个 *** 文件，然则我们的代码一旦改变了，用户接见新的页面时就需要重新加载一个新的 *** 文件。有些情形下，我们只是单独修改了样式，这样也要重新加载整个应用的 *** 文件，相当不划算。

2. 另有一种情形是我们有多个页面，它们都可以共用一部门样式（这是很常见的，CSS Reset、基础组件样式等基本都是跨页面通用），若是每个页面都单独打包一个 *** 文件，那么每次接见页面都市重复加载原本可以共享的那些 CSS 代码。若是星散开来，第二个页面就有了 CSS 文件的缓存，接见速率自然会加速。虽然对之一个页面来说多了一个请求，然则对随后的页面来说，缓存带来的速率提升相对加倍可观。

因此当我们思量更好地行使缓存来加速静态资源接见时，会实验把一些公共资源单独星散开来，行使缓存加速，以制止重复的加载。除了公共的 CSS 文件或者图片资源等，当我们的 *** 代码文件过大的时刻，也可以用代码文件拆分的设施来举行优化。

抽离公共js资源

webpack4.x的optimization做设置

    module.exports = {
  // ... webpack 设置

  optimization: {
    splitChunks: {
      chunks: "all", // 所有的 chunks 代码公共的部门星散出来成为一个单独的文件
    },
  },
}

稀奇指出公共的文件资源，而不让webpack自己去判断哪些是公共资源

// 
    module.exports = {
  entry: {
    vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方类库
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: "vendor",
          name: "vendor", // 使用 vendor 入口作为公共部门
          enforce: true,
        },
      },
    },
  },
  // ... 其他设置
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /react|angluar|lodash/, // 直接使用 test 来做路径匹配
          chunks: "initial",
          name: "vendor",
          enforce: true,
        },
      },
    },
  },
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: path.resolve(__dirname, "node_modules") // 路径在 node_modules 目录下的都作为公共部门
          name: "vendor", // 使用 vendor 入口作为公共部门
          enforce: true,
        },
      },
    },
  },
}