webpack 代码分离快速指北

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅

分离代码文件

在此以前，首先要知道常常配置的 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 本身去判断处理

• chunks: 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(所有块)，默认为all;
• minSize: 表示在压缩前的最小模块大小，默认为0；
• minChunks: 表示被引用次数，默认为1；
• maxAsyncRequests: 最大的按需(异步)加载次数，默认为1；
• maxInitialRequests: 最大的初始化加载次数，默认为1；
• name: 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
• cacheGroups: 缓存组。

缓存组中还有其余几个参数：

• priority: 表示缓存的优先级；
• test: 缓存组的规则，表示符合条件的的放入当前缓存组，值能够是function、boolean、string、RegExp，默认为空；
• reuseExistingChunk: 表示可使用已经存在的块，即若是知足条件的块已经存在就使用已有的，再也不建立一个新的块。

webpack4——SplitChunksPlugin使用指南

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

或者：

optimization: {
    splitChunks: {
      name: true, // 自动处理文件名
      chunks: 'all',
      minChunks: 1, // 至少 import 1 次的即须要打包
      automaticNameDelimiter: '-',
      cacheGroups: {
        vendors: {
          test: /axios|lodash/, // 将这两个第三方模块单独提取打包
          chunks: 'initial',
        }
      }
    }
  },

optimization-splitchunks

chunks 的配置

注意 ⚠️

若是是动态 import，import('/* webpackChunkName: "lodash" */' 'lodash').then() 那么 splitChunks 设置为 async，代码分离将会起做用。

若是是同步加载 import, import _ from 'lodash' 那么 splitChunks 设置为 async 将不起做用，若是设置为 all，那么还须要配置 cacheGroups

cacheGroups 的配置

vendors 缓存组的配置能够检测第三方模块是否在 node_modules 中，若是存在则该 splitChunks 生效，将会分离到 vendors~... 这样的文件中

配置 filename 则会打包成 [filename] 命名的文件中

runtimeChunk 的做用

这个 runtimeChunk 实际上就是连接业务逻辑和第三方类库之间的关系的 manifest。须要将其提取出来，不然使用 contenthash 的状况下有可能会致使模块内容没发生改变的状况下出现 contenthash 屡次打包出现不一致的状况（实际上就是存在在业务逻辑和模块中的 manifest 发生了改变）

// v4版本的 webpack 不用配置，但最好也提取出来
optimization: {
  runtimeChunk: {
    name: 'runtime'
  }
}

reuseExistingChunk:

若是 a 模块使用了 b，b 模块又使用了 a；a 被打包到 common.js 中，打包 b 时将直接使用已经打包好的 common.js 中的 a；这就是 reuseExistingChunk 的做用：

default: {
  reuseExistingChunk: true,
  filename: 'common.js'
}

他的含义就是只要其中一个模块使用了 import $ from 'jquery'，其余文件中就可直接使用 $ 变量，webpack 会自动在打包过程当中 import 这个模块

css 代码分离

css 部分分离代码文件 直接使用 extract-text-webpack-plugin 便可

一个 JS 文件，加载页面时虽然只须要加载一个 JS 文件，但代码一旦改变，用户访问新的页面时就须要从新加载一个新的 JS 文件。有些状况下，咱们只是单独修改了样式，这样也要从新加载整个应用的 JS 文件，至关不划算。

多个组件共用一部分样式，若是分离开来，第二个页面就有了 CSS 文件的缓存，访问速度天然会加快

MiniCssExtractPlugin

新版本的 webpack 使用这个插件

注意，在引入样式文件 import './style.css' 的时候，若是配置了 treeshaking，应当在 package.json 中配置：

"sideEffects": [
  "*.css"
]

⚠️ 注意，另外在 vue 中若是有 style 标签，还须要在 sideEffects 中加入 *.vue 的配置项。没必要担忧 vue 中的 script 部分会被 treeShaking 掉。

插件的相关配置

filename 指的是若是该 css 文件会直接被插入 html 中那么走的就是 filename 的配置

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[name].chunk.css'
  })
]

既然有分离那就有合并，这里顺便说起一下 css 代码合并

若是有多个入口，想把多个入口引入的样式文件所有打包到一个地方，那么可使用 optimization 配置项的 splitChunks，因此这个配置项不只仅只做用于 js，css 也是能够的：

optimization: {
  splitChuns: {
    cacheGroups: {
      styles: {
        name: 'style', // 将多个入口文件中的样式文件所有合并打包
        test: /\.css$/,
        chunks: 'all',
        enforce: true
      }
    }
  }
}

css 代码根据入口分别打包

还能够根据入口的不一样，来分别打包 css 文件，文档已经讲的很详细了，这部分比较简单能够直接戳文档 https://webpack.js.org/plugins/mini-css-extract-plugin

请关注个人订阅号，不按期推送有关 JS 的技术文章，只谈技术不谈八卦 😊