首页 > 建站教程 > 前端框架 >  webpack5学习笔记:代码分离、SplitChunks、魔法注释(magic comments)正文

webpack5学习笔记:代码分离、SplitChunks、魔法注释(magic comments)

代码分离

就是将打包的js分离成多个js,按需加载,加载速度快,提高代码的加载性能。

Webpack中常用的代码分离:

  1. 入口起点:使用entry配置手动分离代码

  2. 防止重复:使用Entry Dependencies或者SplitChunksPlugin去重和分离代码

  3. 动态导入:通过模块的内联函数调用来分离代码

入口起点 即多入口 实现代码分离

  1. 首先将不相关的代码分离到不同文件,如 main.js、index.js

  2. 在 webpack.config.js 中配置多入口:

entry: {
    main: './src/main.js',
    index: './src/index.js'
},
output: {
    filename: '[name].bundle.js', // 这里的 name 对应 entry 配置的 key
    path: resolveApp('./build')
},
缺点很明显:要配置非常多的入口

Entry Dependencies(入口依赖),用的不多

  1. 比如,index.js 和 main.js 都引入了一个相同的库,如 lodash,如果用上面的打包,打包后,两个js都会有这个库的代码,重复了

  2. 去重方法:

entry: {
    main: {import: './src/main.js', dependOn: 'lodash'},
    index: {import: './src/index.js', dependOn: 'lodash'},
    lodash: 'lodash'
},
output: {
    filename: '[name].bundle.js', // 这里的 name 对应 entry 配置的 key
    path: resolveApp('./build')
},
// 如果有多个,写法可以是:
entry: {
    main: {import: './src/main.js', dependOn: ['lodash', 'dayjs']},
    index: {import: './src/index.js', dependOn: ['lodash', 'dayjs']},
    lodash: 'lodash',
    dayjs: 'dayjs'
},
// 或者
entry: {
    main: {import: './src/main.js', dependOn: 'shared'},
    index: {import: './src/index.js', dependOn: 'shared'},
    shared: ['lodash', 'dayjs']
},

SplitChunks,最常用的分离方式

解释:

  1. 它主要用 SplitChunksPlugin 插件来实现的,该插件在安装webpack时,已默认安装和集成,不需要单独安装和单独使用

  2. 只需要提供 SplitChunksPlugin 相关配置信息即可

SplitChunksPlugin 用法:

// index.js
// 同步加载
import dayjs from 'dayjs'
// 异步加载 lodash
import('lodash').then(res => {
    
})

// webpack.config.js
entry: {
    main: './src/main.js',
    index: './src/index.js',
},
output: {
    filename: '[name].bundle.js', // 这里的 name 对应 entry 配置的 key
    path: resolveApp('./build')
},
// 优化
optimization: {
    // 对代码进行压缩相关设置
    minimizer: [
        // 去除打包时产生的txt说明文件
        new TerserPlugin({
            extractComments: false
        })
    ],
    // SplitChunksPlugin 代码分离
    splitChunks: {
        // async:chunks 的默认值,异步,表示只有代码异步加载库时,才会进行分离
        // initial: 同步
        // all:异步同步加载的库或文件,都进行分离,用法常用
        chunks: 'all'
    }
},

optimization.splitChunks 其他几个常用的值:

minSize

默认20000,即20kb,拆分出来的包的最小限制,即拆分出来的包如果小于这个值,就不进行拆分

optimization: {
    splitChunks: {
        chunks: 'all',
        minSize: 200000
    }
},

maxSize

将大于maxSize的包继续拆分,拆分成不小于minSize的包

optimization: {
    splitChunks: {
        chunks: 'all',
        minSize: 200000,
        maxSize: 1000000
    }
},

minChunks

表示导入的包至少被导入了几次,才会被拆分

optimization: {
    splitChunks: {
        chunks: 'all',
        minSize: 200000,
        maxSize: 1000000,
        minChunks: 1
    }
},

cacheGroups

表示将匹配到的文件,如来自node_modules,都分离成指定的文件名

optimization: {
    splitChunks: {
        chunks: 'all',
        minSize: 200000,
        maxSize: 1000000,
        minChunks: 1,
        cacheGroups: {
            // vendors 随便取的名字
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                filename: '[id]_vendors.js',
                priority: -10  // 优先级最高
            },
            // 打包自己的有规则的文件,如 bar_01.js、bar_02.js,将它们都打包成 bar 开头的文件:
            bar: {
                test: /bar_/,
                filename: '[id]_bar.js',
                priority: -20
            },
            // 对引入多次的文件,也打包成特殊命名的文件
            default: {
                minChunks: 2,
                filename: 'common_[id].js',
                priority: -30  // 优先级最低
            }
        }
    }
},

optimization.chunkIds 配置

  1. optimization.chunkIds配置告知webpack,打包生成的模块的id采用什么算法

optimization: {
    // natural:自然数,一般不用
    // named: 命名,会将引入的 文件路径+文件名+后缀+output.filename配置 拼接在一起
    // deterministic:根据内部算法生成的ID,而且针对相同文件,id不变,默认值
    chunkIds: 'deterministic'
},

output.chunkFilename

  1. 用于引入文件打包命名,区分默认文件打包命名

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

注:这里的 [name] 就是 optimization.chunkIds 设置的id,如果相对这个 name 进行自定义,可以在引入文件时,借助魔法注释(magic comments),如:

import(/* webpackChunkName: 'foo' */'./foo').then(res => {

})
  • 使用了魔法注释,加上 output.chunkFilename,最终打包的文件名:foo.chunk.js

  • 在router.vuejs.org,搜索懒加载,就能看到路由的推荐写法,就是使用的魔法注释