抽离css以及公共js

分离css

• 分离css：为什么要把 CSS 文件分离出来，而不是直接一块儿打包在 JS 中。最主要的缘由是咱们但愿更好地利用缓存。
• extract-text-webpack-plugin
  > 1. 假设咱们本来页面的静态资源都打包成一个 JS 文件，加载页面时虽然只须要加载一个 JS 文件，可是咱们的代码一旦改变了，用户访问新的页面时就须要从新加载一个新的 JS 文件。有些状况下，咱们只是单独修改了样式，这样也要从新加载整个应用的 JS 文件，至关不划算。 2. 还有一种状况是咱们有多个页面，它们均可以共用一部分样式（这是很常见的，CSS Reset、基础组件样式等基本都是跨页面通用），若是每一个页面都单独打包一个 JS 文件，那么每次访问页面都会重复加载本来能够共享的那些 CSS 代码。若是分离开来，第二个页面就有了 CSS 文件的缓存，访问速度天然会加快。虽然对第一个页面来讲多了一个请求，可是对随后的页面来讲，缓存带来的速度提高相对更加可观。 所以当咱们考虑更好地利用缓存来加速静态资源访问时，会尝试把一些公共资源单独分离开来，利用缓存加速，以免重复的加载。除了公共的 CSS 文件或者图片资源等，当咱们的 JS 代码文件过大的时候，也能够用代码文件拆分的办法来进行优化。

抽离公共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,
        },
      },
    },
  },
}