webapck4 玄妙的 SplitChunks Plugin

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

内容简介:webpack 4舍弃了之前的原文链接:几点说明:

webpack 4舍弃了之前的 commonChunkPlugin ,增加了 SplitChunksPlugin , 对于这个插件,它的 option 选项有 initialasyncall 三个值。我想大多数刚学习 webpack 4 的同学应该都不能很好的理解这几个值的区别,到底每个选项值是啥意思,我们来手把手实践一下。

原文链接: Webpack 4 — Mysterious SplitChunks Plugin

几点说明:

name

官方文档

我们做一个粗略的尝试,思路是有两个 a.jsb.js 两个入口文件,引入相同的模块,区别是一些模块是动态引入的,以此来摸索一下 Code-Spliting

开始之前

坠重要的当然是配置一下webpack环境

  • 初始化
mkdir splitTest
cd splitTest
npm init -y
复制代码
  • 安装依赖
npm i react jquery loadsh -S

npm i webpack webpack-bundle-analyzer webpack-cli @babel/core @babel/plugin-syntax-dynamic-import -D
复制代码
  • webpack配置

webpack.config.js

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
    mode: 'production',
    entry: {
        a: './src/a.js',
        b: './src/b.js'
    },
    output: {
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new BundleAnalyzerPlugin()
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /node_modules/,
                    name: 'vendors', // 这个字段不写结果会不一样,可以尝试一下,我目前没整明白,求大佬解答
                    chunks: 'initial',
                }
            }
        }
    }
}

复制代码

package.json

"scripts": {
    "build": "webpack --config webpack.config.js"
}
复制代码

.babelrc

{
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}
复制代码
  • a.js
import 'react';
import 'jquery';
import ('lodash');

console.log('I am angry!');
var a = 10;

export default a;


复制代码
  • b.js
import ('react');
import ('lodash');
import 'jquery';

console.log('I am Exciting!');
var b = 10;

export default b;
复制代码

采用控制变量法,我们来试验当存在公共库的时候,webpack是怎么处理的

  • 1 一个动态引入,另个一不 (React)
  • 2 两个都不动态加载 (JQuery)
  • 3 两个都动态加载 (lodash)

画了个比较挫的图,大概描述一下

webapck4 玄妙的 SplitChunks Plugin

准备工作都弄好了

chunks: 'initial'

...
vendor: {
    test: /node_modules/,
    chunks: 'initial',
    priority: 1,
}
...
复制代码
webapck4 玄妙的 SplitChunks Plugin

从图中我们可以看出:

  • 1 JQueryreact 被打到 vendors.bundle.js 里,被 a.jsb.js 共享,由于 reacta.js 中不是动态加载的,所以也被打进去了
  • 2 lodash 被打到 1.bundle.js 中 因为这是两个文件共有的动态模块
  • 3 b.js 中的 react 被打到 4.bundle.js

chunks: 'async'

webapck4 玄妙的 SplitChunks Plugin

看看发生了什么:

  • webpackb.js 中抽离了 react ,扔到一个新文件, a.js 中的 react 不动。这个优化只会作用到动态模块, import('react') 声明会产生独立的文件, import 'react' 则不会
  • a.jsb.js 共有的动态模块 lodash 被移动到一个新文件。
  • 没有 JQuery 进行优化,尽管 a.jsb.js 都引用了

相当于告诉 webpack ,我打包的时候只关心动态加载的模块,其他的你随便玩。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

深入理解Nginx(第2版)

深入理解Nginx(第2版)

陶辉 / 机械工业出版社 / 2016-2 / 99.00元

本书致力于说明开发Nginx模块的必备知识,第1版发行以后,深受广大读者的喜爱.然而由于Ng,nx功能繁多且性能强大,以致必须了解的基本技能也很庞杂,而第1版成书匆忙,缺失了几个进阶的技巧描述,因此第2版在此基础上进行了完善。 书中首先通过介绍官方Nginx的基本用法和配置规则,帮助读者了解一般Nginx模块的用法,然后重点介绍了女口何开发HTTP模块(含HTTP过滤模块)来得到定制化的Ng......一起来看看 《深入理解Nginx(第2版)》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具