分離代碼文件

在此之前，首先要知道經常配置的 output 中有關 filename 和 chunkFilename 的區別；簡單來說在 entry 定義的入口文件走的就是 filename 配置項，在入口文件內部引入的通常情況下是 chunk，走 chunkFilename 的配置

所以很多時候分離代碼文件就是將不同的 chunk 分離開來，生產環境中有利于瀏覽器緩存，加快二次訪問的速度

代碼分離的時候，optimization 中配置的 splitChunks 默認就是 async，默認對異步代碼進行分離；所以通常情況下能用異步的用異步 import；配合 prefetching 和 preloading 能夠產生很好的效果

filename 和 chunkFilename 的區別

output: { filename: '[name].js', chunkFilename: '[name].chunk.js'}

舉個例子

如果入口文件是 main.js

那么打包后生成的文件是 main.js

如果 main.js 中引入了其他模塊，比如引入了 lodash 那么可能會生成一個名為 lodash.chunk.js 文件

基本概念了解了，接下來開始對 js 和 css 文件進行分離的操作：

js 代碼分離

js 代碼的分離操作，首先要考慮的就是對異步代碼的分離。這里使用 dynamicImport

dynamicImport

可以使用 magic comment 來修改動態 import 導出的 chunkname，語法規則如下：

import('/* webpackChunkName: "lodash" */' 'lodash').then(//...)

如果需要使用這種注釋的寫法，應該安裝模塊 @babel/plugin-syntax-dynamic-import，并在 babelrc 中引入這個插件，使用方法很簡單這里不多說了

splitChunks

splitChunk 的相關配置參數

建議將公共使用的第三方類庫顯式地配置為公共的部分，而不是 webpack 自己去判斷處理

緩存組中還有其他幾個參數：

webpack4——SplitChunksPlugin使用指南

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