webpack 代码分离快速指北

栏目: CSS · 发布时间: 5年前

内容简介::star:️ 更多前端技术和知识点,搜索订阅号在此之前,首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别;简单来说在 entry 定义的入口文件走的就是 filename 配置项,在入口文件内部引入的通常情况下是 chunk,走 chunkFilename 的配置

webpack 代码分离快速指北

:star:️ 更多前端技术和知识点,搜索订阅号 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
minSize
minChunks
maxAsyncRequests
maxInitialRequests
name
cacheGroups

缓存组中还有其他几个参数:

priority
test
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 的配置

注意 :warning:

如果是动态 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 即可

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

MiniCssExtractPlugin

新版本的 webpack 使用这个插件

注意,在引入样式文件 import './style.css' 的时候,如果配置了 treeshaking,应当在 package.json 中配置:

"sideEffects": [
  "*.css"
]

:warning: 注意,另外在 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

webpack 代码分离快速指北

请关注我的订阅号,不定期推送有关 JS 的技术文章,只谈技术不谈八卦 :blush:


以上所述就是小编给大家介绍的《webpack 代码分离快速指北》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从0开始做运营 入门篇

从0开始做运营 入门篇

张亮 / 4.99元

此书是《从零开始做运营》系列的入门篇。 在互联网产品经理热的今天,关于传统的网站与产品运营的书籍一直非常缺乏,很多有志于互联网行业的年轻人并不明白一款产品、一个网站的策划、上线、成长、成熟直到衰落的过程中,除了产品和网站本身的设计之外,还有一块非常重要的工作是针对网站与产品生命周期的持续运营。 网站与产品运营是一个非常辛苦而非常有趣的事情,希望本书可以为有志于从事互联网网站与产品运营的......一起来看看 《从0开始做运营 入门篇》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试